Bootstrap 3 中的 sr-only 是什么? [英] What is sr-only in Bootstrap 3?

问题描述

sr-only 类的用途是什么?它重要还是我可以删除它?没有它也能正常工作.

这是我的例子:

<button type="button" class="btn btn-info btn-md">部门</button><button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">切换下拉菜单</span><ul class="dropdown-menu" role="menu"><li><a href="#">销售</a></li><li><a href="#">技术</a></li><li class="divider"></li><li><a href="#">显示全部</a></li>

解决方案

根据 bootstrap 的文档，该类用于隐藏仅用于 屏幕阅读器来自呈现页面的布局.

<块引用>

如果您没有为每个输入都包含一个标签，屏幕阅读器将无法处理您的表单.对于这些内联表单，您可以使用 .sr-only 类隐藏标签.

这是使用的示例样式:

.sr-only {位置:绝对；宽度:1px；高度:1px；填充:0；边距:-1px；溢出:隐藏；剪辑:矩形(0,0,0,0)；边框:0；}

<块引用>

它重要还是我可以删除它?没有它也能正常工作.

这很重要，不要删除它.

出于可访问性目的，您应该始终考虑屏幕阅读器.无论如何，使用该类都会隐藏元素，因此您不应看到视觉差异.

如果您有兴趣阅读有关可访问性的内容:

• 网络无障碍倡议 (WAI)

• MDN 无障碍文档

What is the class sr-only used for? Is it important or can I remove it? Works fine without.

Here's my example:

<div class="btn-group">
    <button type="button" class="btn btn-info btn-md">Departments</button>
    <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sales</a></li>
        <li><a href="#">Technical</a></li>
        <li class="divider"></li>
        <li><a href="#">Show all</a></li>
    </ul>
</div>

解决方案

According to bootstrap's documentation, the class is used to hide information intended only for screen readers from the layout of the rendered page.

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

Here is an example styling used:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Is it important or can I remove it? Works fine without.

It's important, don't remove it.

You should always consider screen readers for accessibility purposes. Usage of the class will hide the element anyways, therefore you shouldn't see a visual difference.

If you're interested in reading about accessibility:

• Web Accessibility Initiative (WAI)

• MDN Accessibility documentation

这篇关于Bootstrap 3 中的 sr-only 是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！