Html Bootstrap 3 中的 sr-only 是什么？

What is sr-only in Bootstrap 3?

提问by kanarifugl

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

类是做什么sr-only用的？它重要还是我可以删除它？没有工作正常。

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>

回答by

According to bootstrap's documentation, the class is used to hide information intended only for screen readersfrom 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 examplestyling 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:

如果您有兴趣阅读有关可访问性的内容：

• Web Accessibility Initiative (WAI)

• MDN Accessibility documentation

• 网络无障碍倡议 (WAI)

• MDN 可访问性文档

回答by Hrvoje Golcic

As JoshC said, the class is used to hide information used for screen readers. 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.

正如 JoshC 所说，该类用于隐藏用于屏幕阅读器的信息。但不仅要隐藏标签，您还可以考虑向视力正常的用户隐藏“跳转到主要内容”的内部链接，如果您在主要内容之前有复杂的导航或广告，这对于盲人用户来说是可取的。

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. So making a website accessible is important.

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

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. 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. There you will find as well fully accessible components/widgets which does not require any "screen reader only" interventions.

作为开发人员，我们应该制作简单适用于所有开箱即用的可访问内容，而不是专门针对屏幕阅读器。这并不总是可能的，但要小心使用 ARIA 和“仅屏幕阅读器”调整。如果您没有完全理解它，请不要这样做。不正确的实现可能比不使用它更糟糕。请阅读有关 ARIA 不良示例的辅助功能开发人员指南。在那里，您还会找到完全可访问的组件/小部件，它们不需要任何“仅屏幕阅读器”干预。

回答by Hrvoje Golcic

I found this in the navbar example, and simplified it.

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

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

由于这项技术，盲人应该在您的网站上更轻松地导航。

回答by Pegues

.sr-onlyis a class name specifically used for screen readers. You can use any class name, but .sr-onlyis pretty commonly used. 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.

.sr-only是专门用于屏幕阅读器的类名。您可以使用任何类名，但.sr-only非常常用。如果您不关心在开发时考虑合规性，那么可以将其删除。如果删除它不会以任何方式影响 UI，因为此类的 CSS 对桌面和移动设备浏览器不可见。

There seems to be some information missing here about the use of .sr-onlyto explain its purpose and being for screen readers. 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. However, the use of .sr-onlyis not all that needs to be taken into consideration for 508 compliance. You have the use of color, size of fonts, accessibility via navigation, descriptors, use of aria and so much more.

这里似乎缺少一些关于使用.sr-only来解释其目的和用于屏幕阅读器的信息。首先，始终牢记受损用户非常重要。减值是 508 合规的目的：https: //www.section508.gov/，引导程序考虑到这一点很棒。但是，.sr-only对于 508 合规性而言，使用并不是所有需要考虑的因素。您可以使用颜色、字体大小、导航可访问性、描述符、咏叹调的使用等等。

But as for .sr-only- what does the CSS actually do? There are several slightly different variants of the CSS used for .sr-only. One of the few I use is below:

但至于.sr-only- CSS 实际上是做什么的？用于.sr-only. 我使用的少数之一如下：

.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. Example markup is as follows:

上面的 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>

Additionally, if a DOM element has a width and height of 0, the element is not seen by the DOM. This is why the above CSS uses width: 1px; height: 1px;. By using display: noneand setting your CSS to height: 0and width: 0, the element is not seen by the DOM and is thus problematic. The above CSS using 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. Hiding the content from desktop and mobile browsers is done by adding an offset from width: 1pxand height: 1pxpreviously mentioned by using:

此外，如果 DOM 元素的宽度和高度为 0，则 DOM 看不到该元素。这就是为什么上述 CSS 使用width: 1px; height: 1px;. 通过使用display: none您的 CSS 并将其设置为height: 0and width: 0，元素不会被 DOM 看到，因此会出现问题。上面使用的 CSSwidth: 1px; height: 1px;并不是使内容对桌面和移动浏览器不可见（没有overflow: hidden，您的内容仍会显示在屏幕上）和屏幕阅读器可见的全部内容。隐藏桌面和移动浏览器中的内容是通过添加一个偏移量来完成的，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.

我希望我在这里提供的信息除了其他回复之外，对其他人也有进一步的用处。

回答by Jaroslav Kubacek

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 将显示在所有其他设备上，文字错误：在文本阅读器上。

回答by Ch UmarJamil

The .sr-onlyclass hides an element to all devices except screen readers:

的.sr-only类隐藏除了一个元件的所有设备screen readers:

Skip to main content Combine .sr-only with .sr-only-focusable to show the element again when it is focused

跳转到主要内容 结合 .sr-only 和 .sr-only-focusable 以在元素聚焦时再次显示元素