什么是sr-only Bootstrap 3？
什么是类sr-only用于？ 它是重要的还是我可以删除它？ 没有工作正常。
这是我的例子：
<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>
根据bootstrap的文档 ，该类用于隐藏仅用于屏幕阅读器的信息从渲染页面的布局。
如果您没有为每个input包含标签，屏幕阅读器将会对您的表单造成麻烦。 对于这些内联表单，可以使用.sr-only类隐藏标签。
这是一个使用的样式：
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
它是重要的还是我可以删除它？ 没有工作正常。
重要的是，不要删除它。
您应该始终考虑屏幕阅读器的可访问性。 无论如何，这个类的用法会隐藏元素，所以你不应该看到视觉上的差异。
如果您有兴趣阅读有关辅助function：
-
无障碍网页倡议（WAI）
-
MDN可访问性文档
正如JoshC所说，这个类是用来隐藏用于屏幕阅读器的信息的。 但是，不仅隐藏标签，如果您有复杂的导航或在内容之前添加页面标题，您可能会考虑隐藏有远见的用户内部链接“跳到主要内容”，这对于盲人用户来说是可取的。 他们需要按下箭头键多次才能通过屏幕阅读器访问。
如果您希望您的网站与屏幕阅读器进行更多的互动，请使用W3C标准化的ARIA属性，我绝对build议您访问Google在线课程 ，这个课程只需要1-2 小时，或者至less可以观看Google的40分钟video 。
根据世界卫生组织的统计，有2.85亿人有视力障碍。 所以build立一个网站是很重要的。
我在navbar的例子中find了这个，并简化了它。
<ul class="nav"> <li><a>Default</a></li> <li><a>Static top</a></li> <li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li> </ul>
你看到哪一个被选中（ sr-only部分被隐藏）：
- 默认
- 静态顶部
- 固定顶部
如果使用屏幕阅读器，您会听到select了哪一个：
- 默认
- 静态顶部
- 固定顶部（当前）
由于这种技术盲人应该在您的网站上更容易浏览。
确保对象仅显示（或应该）给阅读器和类似的设备。 它与其他属性aria-hidden =“true”的元素的上下文更有意义。
<div class="alert alert-danger" role="alert"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> Enter a valid email address </div>
字形将显示在所有其他设备上，单词错误：在文本阅读器上。
.sr-only是专门用于屏幕阅读器的类名。 你可以使用任何类名，但是.sr-only是相当常用的。 如果你不关心开发合规性，那么它可以被删除。 如果删除，它将不会以任何方式影响UI，因为此类的CSS对于桌面和移动设备浏览器不可见。
似乎有一些关于.sr-only的使用缺less的信息.sr-only为了解释它的目的和屏幕阅读器。 首先，始终保持受损用户的头脑是非常重要的。 508合规性的目的是：减轻损失的目的是https://www.section508.gov/ ，引导程序将此考虑在内是非常好的。 然而，使用.sr-only并不是所有需要考虑的508遵从性。 您可以使用颜色，字体大小，通过导航访问，描述符，使用咏叹调等等。
但是.sr-only – CSS实际上做了什么？ 有几个稍微不同的CSS .sr-only用于.sr-only 。 我使用的less数几个之一是：
.sr-only { position: absolute; margin: -1px 0 0 -1px; padding: 0; display: block; width: 1px; height: 1px; font-size: 1px; line-height: 1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; outline: 0; }
上面的CSS隐藏了用这个类包装的桌面和移动浏览器的内容，但是被诸如JAWS的屏幕阅读器看到： http ： //www.freedomscientific.com/Products/Blindness/JAWS 。 示例标记如下：
<a href="#" target="_blank"> Click to Open Site <span class="sr-only">This is an external link</span> </a>
此外，如果一个DOM元素的宽度和高度为0，则该元素不会被DOM看到。 这就是为什么上面的CSS使用width: 1px; height: 1px; width: 1px; height: 1px; 。 通过使用display: none并将CSS设置为height: 0和width: 0 ，该元素不会被DOM看到，因此是有问题的。 上面的CSS使用width: 1px; height: 1px; width: 1px; height: 1px; 并不是所有的做法都是为了使内容在桌面和移动浏览器中不可见（没有overflow: hidden ，内容仍然会显示在屏幕上），并且屏幕阅读器可以看到内容。 隐藏桌面和移动浏览器的内容是通过使用以下提到的width: 1px和height: 1px添加一个偏移来完成的：
position: absolute; margin: -1px 0 0 -1px; overflow: hidden;
最后，要对屏幕阅读器看到并传递给其受损用户的内容有一个很好的了解，请closures浏览器的页面样式。 对于Firefox，您可以通过以下方式来执行此操作：
View > Page Style > No Style
我希望我在这里提供的信息对其他人的反应更有用处。
.sr-only类将一个元素隐藏到屏幕阅读器以外的所有设备上：
跳转到主要内容将.sr-only与.sr-only-focusable组合在一起以在焦点聚焦时再次显示该元素
