Question

显然，没有太多关于sr-only-focusable的文档或文章。这里的官方文件http://getbootstrap.com/css/#helper-classes-screen-readers似乎不太可以理解。任何人都可以帮助我吗？

Answer 1

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

Answer 2

在了解sr-only-focusable之前，您必须先了解sr-only。

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

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

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

每当将可聚焦元素赋予仅sr类时，也应为其赋予sr仅可聚焦类。如果隐藏的元素无法获得焦点，则只需sr-only。

Answer 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;
}

在bootstrap中使用sr-only-focusable类有什么用？

3 个答案: