在引导程序中使用 sr-only-focusable 类有什么用？答案

【问题标题】：what is the use of sr-only-focusable class in bootstrap?在引导程序中使用 sr-only-focusable 类有什么用？
【发布时间】：2016-03-14 13:07:35
【问题描述】：

显然没有太多关于sr-only-focusable 的文档或文章。这里的官方文档http://getbootstrap.com/css/#helper-classes-screen-readers，似乎不太好理解。谁能帮我解决这个问题？

【问题讨论】：

What is sr-only in Bootstrap 3?的可能重复

标签： twitter-bootstrap-3

【解决方案1】：

你必须先了解 sr-only，然后才能了解 sr-only-focusable。

有时，有视力的用户完全可以理解屏幕设计。但是需要屏幕阅读器的用户在没有额外信息的情况下可能无法理解给定元素的上下文/目的。将此信息添加到视力正常的用户的页面可能会使屏幕混乱。添加具有sr-only 类的元素会导致该元素在视觉上不在屏幕上，但仍由屏幕阅读器读取。这样的元素是放置使用屏幕阅读器的人所需的上下文信息的好地方。

但如果 sr-only 元素是输入或其他能够接收焦点的元素，则会出现问题。如果一个人通过键盘导航页面，但不使用屏幕阅读器，那么当 sr-only 元素获得焦点时，用户将不知道什么具有焦点或做什么。

sr-only-focusable 类使 sr-only 元素在元素获得焦点时变为可见，并在元素失去焦点时再次隐藏它。这只发生在 sr-only 元素通过键盘获得焦点时。只要用户通过鼠标导航，sr-only 元素就永远不会获得焦点，并保持隐藏状态。

当一个可聚焦元素被赋予 sr-only 类时，它也应该被赋予 sr-only-focusable 类。如果隐藏元素无法获得焦点，则只需要 sr-only。

【讨论】：

【解决方案2】：

sr-only-focusable 允许有视力的仅使用键盘的用户查看跳转到联系链接。一种使用方法是这样的：
html:

<body>
       <a href="#content" class="sr-only sr-only-focusable" >Skip to main content</a>

css：

// bootstrap
:focus.sr-only {
  // undo the hiding
  width: auto;
  height: auto;
  margin: 0;
  overflow: auto;
  clip: auto;
}

您的主要内容所在的html页面：

<div class="container" id="content">

【讨论】：

sr-only-focusable:focus 应该有你调整过的 CSS
// bootstrap .sr-only-focusable: focus { // 撤消隐藏宽度：auto;高度：自动；边距：0；溢出：自动；剪辑：自动； }

【解决方案3】：

.sr-only 类对除屏幕阅读器以外的所有设备隐藏一个元素。 .sr-only-focusable 类派上用场，特别是对于跳过导航链接。例如：

提供跳过链接并确保它在聚焦时可见。这为用户提供了额外的控制权。

[2.4.1 绕过块][1]

跳过链接可用于提供对主要内容的快速访问页面或视图。这允许一个人轻松地绕过全局重复的内容，例如网站的主要导航，或持久的搜索小部件。

这是我使用的 CSS：

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

.sr-only-focusable:focus {
    position: relative;
    width: auto;
    height: auto;
    clip: initial;
    margin: inherit;
    padding: inherit;
    border: initial;
}

【讨论】：