bootstrap 中 sr-only-focusable 类的用途是什么? [英] what is the use of sr-only-focusable class in bootstrap?

问题描述

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

Clearly there is no much documentation or articles about sr-only-focusable. The official documentation here http://getbootstrap.com/css/#helper-classes-screen-readers, seems not so much understandable. Can anyone help me out in this?

推荐答案

必须先了解 sr-only，才能了解 sr-only-focusable.

You must understand sr-only before you can understand sr-only-focusable.

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

Sometimes a screen design is perfectly understandable for a sighted user. But a user that requires a screen reader may not be able to understand the context/purpose of a given element without additional information. Adding this information to the page for a sighted user could make the screen cluttered. Adding an element with the sr-only class causes that element to be off screen visually, but is still read by the screen reader. Such an element is a good place to put contextual information needed by those using a screen reader.

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

But there is a problem if the sr-only element is an input or other element capable of receiving focus. If a person navigates the page via the keyboard, but does not use a screen reader, then the user will have no idea what has focus, or what to do, when the sr-only element gets focus.

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

The sr-only-focusable class causes the sr-only element to become visible whenever the element gets focus, and hides it again when the element loses focus. This only occurs when the sr-only element gets focus via the keyboard. As long as the user navigates via the mouse, the sr-only element never gets focus, and remains hidden.

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

Whenever a focusable element is given the sr-only class, it should also be given the sr-only-focusable class as well. If the hidden element cannot get focus, then sr-only is all that is needed.

这篇关于bootstrap 中 sr-only-focusable 类的用途是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！