.sr only是专门用于屏幕阅读器的类名。您可以使用任何类名，但.sr非常常用。如果您不关心在开发时考虑到合规性，那么可以删除它。如果删除，它将不会以任何方式影响UI，因为桌面和移动设备浏览器无法看到该类的CSS。
这里似乎缺少了一些关于.sr的信息，只是为了解释它的用途和屏幕阅读器。首先，始终记住受损用户是非常重要的。减值是508合规的目的：https://www.section508.gov/，而bootstrap将这一点考虑在内是很好的。然而，仅使用.sr并不是508法规遵从性需要考虑的全部内容。您可以使用颜色、字体大小、导航的可访问性、描述符、咏叹调的使用等等。
但对于.sr，CSS实际上做什么？只有.sr使用的CSS有几个稍微不同的变体。我使用的几个变体之一如下：
.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使用宽度：1px；高度：1px；。通过使用display:none并将CSS设置为height:0和width:0，DOM看不到元素，因此存在问题。上面的CSS使用宽度：1px；高度：1px；这并不是你所做的一切，让桌面和移动浏览器看不到内容（没有溢出：隐藏，你的内容仍然会显示在屏幕上），让屏幕读者看到。在桌面和移动浏览器中隐藏内容是通过使用以下方法添加与前面提到的宽度：1px和高度：1px的偏移量来完成的：
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
最后，要想很好地了解屏幕阅读器所看到的内容并将其传递给受损用户，请关闭浏览器的页面样式。对于Firefox，您可以执行以下操作：
View > Page Style > No Style
我希望我在这里提供的信息除了其他回答之外，对其他人也有用。
