7

Clearly there is not much documentation or articles about sr-only-focusable (in recent Bootstrap called visually-hidden-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?

Michael Scott Asato Cuthbert
  • 3,442
  • 2
  • 22
  • 52
gates
  • 4,465
  • 7
  • 32
  • 60
  • Possible duplicate of [What is sr-only in Bootstrap 3?](http://stackoverflow.com/questions/19758598/what-is-sr-only-in-bootstrap-3) – Anton Dec 09 '15 at 20:04

3 Answers3

9

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.

dbenham
  • 127,446
  • 28
  • 251
  • 390
3

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">
Repressed Radar
  • 144
  • 1
  • 7
0

The .sr-only class hides an element to all devices except screen reader. The .sr-only-focusable class comes in handy, particularly for skip-nav links. For example:

Providing a skip link and make sure that it is visible when focused. This provides extra control for users.

[2.4.1 Bypass Blocks][1]

A skip link can be used to provide quick access to the main content of a page or view. This allows a person to easily bypass globally repeated content such as a website's primary navigation, or persistent search widget.

This is the CSS I use:

.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;
}
Gcamara14
  • 510
  • 4
  • 14