正如JoshC所说，class.sr仅用于在视觉上隐藏仅用于屏幕阅读器的信息。但不仅仅是为了隐藏标签。您可能会考虑隐藏各种其他元素，如“跳转到主要内容”链接、具有替代文本的图标等。

顺便说一下，如果您需要元素在聚焦时变得可见，例如“跳到主要内容”，您也可以使用.sr only sr only focusable

如果你想让你的网站更容易访问，我建议从这里开始：

可访问性@Google-Web基础辅助功能开发人员指南（我个人最爱）WebAIM原则+WebAIM WCAG清单可访问性@ReactJS（很多好的资源和一般的东西）

Why?

根据世界卫生组织的数据，2.85亿人有视力障碍。因此，使网站易于访问是很重要的。

重要事项：避免区别对待残疾用户。一般来说，尽量避免为不同的用户群体开发不同的内容。相反，尝试使现有内容易于访问，这样它就可以开箱即用，并且适用于所有不专门针对屏幕阅读器的用户。换句话说，不要试图重新发明轮子。否则，所产生的可访问性通常会比根本没有开发的情况更差。我们开发者不应该假设这些用户将如何使用我们的网站。所以，当你需要开发这样的解决方案时，要非常小心。显然，“跳过链接”是此类内容的一个很好的例子，如果它在聚焦时可见。但也有很多坏例子。这将是在地图上向屏幕阅读器隐藏一个“缩放”按钮，假设它与盲人用户无关。但令人惊讶的是，在盲人用户中确实使用了缩放功能！他们喜欢像许多其他用户一样下载图像（即使是高分辨率），以便将它们发送给其他人或在其他环境中使用它们。来源-阅读更多@ADG：不良ARIA实践

确保对象仅向读取器和类似设备显示（或应该显示）。它在具有属性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>

Glyph图标将显示在所有其他设备上，文本阅读器上显示单词错误：。

我在导航栏示例中发现了这一点，并对其进行了简化。

<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部分隐藏）：

违约静态顶部固定顶部

如果您使用屏幕阅读器，您会听到选择了哪一个：

违约静态顶部固定顶部（当前）

由于这种技术，盲人应该更容易在你的网站上导航。

正如JoshC所说，class.sr仅用于在视觉上隐藏仅用于屏幕阅读器的信息。但不仅仅是为了隐藏标签。您可能会考虑隐藏各种其他元素，如“跳转到主要内容”链接、具有替代文本的图标等。

顺便说一下，如果您需要元素在聚焦时变得可见，例如“跳到主要内容”，您也可以使用.sr only sr only focusable

如果你想让你的网站更容易访问，我建议从这里开始：

可访问性@Google-Web基础辅助功能开发人员指南（我个人最爱）WebAIM原则+WebAIM WCAG清单可访问性@ReactJS（很多好的资源和一般的东西）

Why?

根据世界卫生组织的数据，2.85亿人有视力障碍。因此，使网站易于访问是很重要的。

重要事项：避免区别对待残疾用户。一般来说，尽量避免为不同的用户群体开发不同的内容。相反，尝试使现有内容易于访问，这样它就可以开箱即用，并且适用于所有不专门针对屏幕阅读器的用户。换句话说，不要试图重新发明轮子。否则，所产生的可访问性通常会比根本没有开发的情况更差。我们开发者不应该假设这些用户将如何使用我们的网站。所以，当你需要开发这样的解决方案时，要非常小心。显然，“跳过链接”是此类内容的一个很好的例子，如果它在聚焦时可见。但也有很多坏例子。这将是在地图上向屏幕阅读器隐藏一个“缩放”按钮，假设它与盲人用户无关。但令人惊讶的是，在盲人用户中确实使用了缩放功能！他们喜欢像许多其他用户一样下载图像（即使是高分辨率），以便将它们发送给其他人或在其他环境中使用它们。来源-阅读更多@ADG：不良ARIA实践

根据bootstrap的文档，该类用于从呈现页面的布局中隐藏仅用于屏幕阅读器的信息。

如果您不为每个输入都添加标签，屏幕阅读器将无法处理表单。对于这些内联表单，可以使用.sr only类隐藏标签。

以下是使用的样式示例：

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

它重要吗？我可以删除它吗？如果没有，工作正常。

重要的是，不要删除它。

为了便于访问，您应该始终考虑屏幕阅读器。类的使用无论如何都会隐藏元素，因此您不应该看到视觉上的差异。

如果您有兴趣阅读有关可访问性的信息：

Web无障碍倡议（WAI）MDN辅助功能文档

.sr only类对除屏幕读取器之外的所有设备隐藏一个元素：

跳到主要内容将.sr only与.sr onlyfocusable组合在一起，以便在元素聚焦时再次显示该元素

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important; /* 2 */
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; /* 3 */
}