twitter-bootstrap-3 - bootstrap 中 sr-only-focusable 类的用途是什么？

Question

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

Answer 1

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

有时，屏幕设计对于视力正常的用户来说是完全可以理解的。但是需要屏幕阅读器的用户可能无法在没有附加信息的情况下理解给定元素的上下文/目的。将此信息添加到视力正常的用户的页面可能会使屏幕变得困惑。添加带有 sr-only 的元素class 导致该元素在视觉上离开屏幕，但仍由屏幕阅读器读取。这样的元素是放置使用屏幕阅读器的用户所需的上下文信息的好地方。

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

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

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