Menu
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?
630
You must understand sr-only before you can understand sr-only-focusable.
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.
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.
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.
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.
160
sr-only-focusable allows sighted keyboard-only users to see the skip to contact link. one way to use is like this:
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 pages where your main content is:
<div class="container" id="content">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
