gat*_*tes 4 twitter-bootstrap-3
显然没有太多关于sr-only-focusable. 这里的官方文档http://getbootstrap.com/css/#helper-classes-screen-readers似乎不太好理解。任何人都可以帮我解决这个问题吗？
您必须先了解 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。
小智 3
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">
| 归档时间： |
|
| 查看次数： |
5948 次 |
| 最近记录： |