本文翻译自：What is sr-only in Bootstrap 3?
What is the class sr-only used for? sr-only用于什么类？ 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>
#1楼
参考：https://stackoom.com/question/1Ku74/Bootstrap-中的sr-only是什么
#2楼
According to bootstrap's documentation , the class is used to hide information intended only for screen readers from the layout of the rendered page. 根据bootstrap的文档 ，该类用于从呈现的页面的布局中隐藏仅用于屏幕阅读器的信息。
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. 对于这些内联表单，您可以使用.sr-only类隐藏标签。
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: 如果您有兴趣阅读有关可访问性的信息：
#3楼
As JoshC said, the class is used to hide information used for screen readers. 正如JoshC所说，该类用于隐藏用于屏幕阅读器的信息。 But not only to hide labels, you might consider to hide from sighted user an internal link "skip to main content" which is desirable for blind users if you have a complex navigation or ads before the main content. 但是，不仅要隐藏标签，您还可以考虑向视力不佳的用户隐藏“跳至主要内容”的内部链接，如果您在主要内容之前有复杂的导航或广告，这对于盲人来说是理想的。
If you want your site to interact even more with screen readers, use W3C standardized ARIA attributes and I definitely recommend to visit the Google online course , which will take only up to 1-2h or at least watch a Google's 40min video . 如果您希望您的网站与屏幕阅读器进行更多互动，请使用W3C标准化的ARIA属性，我绝对建议您访问Google在线课程 ，该课程最多需要1-2 小时，或者至少观看Google的40分钟视频 。
According to the World Health Organization, 285 million people have vision impairments. 根据世界卫生组织的数据，2.85亿人有视力障碍。 So making a website accessible is important. 因此，使网站可访问性很重要。
UPDATE 2019: 更新2019：
As developers we should make accessible content that simply works for all out-of-the-box and not specifically target screen readers. 作为开发人员，我们应该提供仅适用于所有即用型内容的可访问内容，而不是专门针对屏幕阅读器的内容。 That's not always possible but be careful using ARIA and "screen reader only" adjustments . 这并非总是可能的，但请谨慎使用ARIA和“仅限屏幕阅读器”调整 。 Don't do it if you don't fully understand it. 如果您不完全了解它，请不要这样做。 Incorrect implementation might be much worse than not using it whatsoever. 错误的实现可能比不使用它更糟糕。 Please read accessibility-developer-guide on ARIA bad examples . 请阅读关于ARIA错误示例的accessibility-developer-develop 。 There you will find as well fully accessible components/widgets which does not require any "screen reader only" interventions. 在那里您将找到完全可访问的组件/小部件，不需要任何“仅屏幕阅读器”干预。
#4楼
I found this in the navbar example , and simplified it. 我在navbar示例中找到了它，并对其进行了简化。
<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>
You see which one is selected ( sr-only part is hidden): 您会看到选择了哪一个（隐藏了sr-only部分）：
- Default 默认
- Static top 静态顶
- Fixed top 固定顶
You hear which one is selected if you use screen reader: 如果您使用屏幕阅读器，则会听到选择了哪个选项：
- Default 默认
- Static top 静态顶
- Fixed top (current) 固定顶部（当前）
As a result of this technique blind people supposed to navigate easier on your website. 由于这项技术，盲人本该在您的网站上更轻松地导航。
#5楼
Ensures that the object is displayed (or should be) only to readers and similar devices. 确保对象仅（或应该）显示给阅读器和类似设备。 It give more sense in context with other element with attribute aria-hidden="true" . 与具有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>
Glyphicon will be displayed on all other devices, word Error: on text readers. Glyphicon将在所有其他设备上显示，在文本阅读器上显示错误：字样。
#6楼
.sr-only is a class name specifically used for screen readers. .sr-only是专门用于屏幕阅读器的类名。 You can use any class name, but .sr-only is pretty commonly used. 您可以使用任何类名，但是.sr-only非常常用。 If you don't care about developing with compliance in mind, then it can be removed. 如果您不关心遵循合规性进行开发，则可以将其删除。 It will not affect UI in any way if removed because the CSS for this class is not visible to desktop and mobile device browsers. 如果将其删除，则不会以任何方式影响UI，因为此类的CSS对台式机和移动设备浏览器不可见。
There seems to be some information missing here about the use of .sr-only to explain its purpose and being for screen readers. 这里似乎缺少有关.sr-only使用.sr-only来解释其目的以及供屏幕阅读器使用的信息。 First and foremost, it is very important to always keep impaired users in mind. 首先，最重要的是始终牢记受损用户。 Impairment is the purpose of 508 compliance: https://www.section508.gov/ , and it is great that bootstrap takes this into consideration. 减损是508合规性的目的： https : //www.section508.gov/ ，引导程序将这一点考虑在内非常重要。 However, the use of .sr-only is not all that needs to be taken into consideration for 508 compliance. 但是， .sr-only使用.sr-only并不是满足508合规性的全部考虑。 You have the use of color, size of fonts, accessibility via navigation, descriptors, use of aria and so much more. 您可以使用颜色，字体大小，通过导航的可访问性，描述符，使用aria等等。
But as for .sr-only - what does the CSS actually do? 但是至于.sr-only -CSS实际上是做什么的？ There are several slightly different variants of the CSS used for .sr-only . .sr-only用于.sr-only的CSS有几种略有不同的变体。 One of the few I use is below: 我使用的几种方法之一如下：
.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;
}
The above CSS hides content in desktop and mobile browsers wrapped with this class, but is seen by a screen reader like JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS . 上面的CSS在此类包装的台式机和移动浏览器中隐藏了内容，但是可通过JAWS之类的屏幕阅读器看到： http : //www.freedomscientific.com/Products/Blindness/JAWS 。 Example markup is as follows: 标记示例如下：
<a href="#" target="_blank">
Click to Open Site
<span class="sr-only">This is an external link</span>
</a>
Additionally, if a DOM element has a width and height of 0, the element is not seen by the DOM. 此外，如果DOM元素的宽度和高度为0，则DOM无法看到该元素。 This is why the above CSS uses width: 1px; height: 1px; 这就是上述CSS使用width: 1px; height: 1px; width: 1px; height: 1px; . 。 By using display: none and setting your CSS to height: 0 and width: 0 , the element is not seen by the DOM and is thus problematic. 通过使用display: none并将CSS设置为height: 0和width: 0 ，DOM无法看到该元素，因此出现了问题。 The above CSS using width: 1px; height: 1px; 上面的CSS使用width: 1px; height: 1px; width: 1px; height: 1px; is not all you do to make the content invisible to desktop and mobile browsers (without overflow: hidden , your content would still show on the screen), and visible to screen readers. 并不是使桌面和移动浏览器看不到内容的全部操作（不会overflow: hidden ，您的内容仍将显示在屏幕上），并使屏幕阅读器可见。 Hiding the content from desktop and mobile browsers is done by adding an offset from width: 1px and height: 1px previously mentioned by using: 隐藏桌面和移动浏览器中的内容的方法是，使用前面提到的width: 1px和height: 1px添加偏移量：
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
Lastly, to have a very good idea of what a screen reader sees and relays to its impaired user, turn off page styling for your browser. 最后，要想很好地了解屏幕阅读器会看到什么并将其中继给有障碍的用户，请关闭浏览器的页面样式。 For Firefox, you can do this by going to: 对于Firefox，您可以执行以下操作：
View > Page Style > No Style
I hope the information I provided here is of further use to someone in addition to the other responses. 希望我在此提供的信息除了其他答复外，还对某人有用。
