什么是sr-only在Bootstrap 3？ [英] What is sr-only in Bootstrap 3?

问题描述

sr-only 使用的类是什么？是重要还是可以删除它？无效。

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

这是我的例子：

<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的文档，该类用于在呈现的页面布局中隐藏仅用于屏幕阅读器的信息。

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

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

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.

这里是 example 使用样式：

.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.

重要的是不要删除它。

您应该始终考虑屏幕阅读器的辅助功能。

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:

• 无障碍倡议（WAI）

MDN辅助功能文档

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