<div>An element without any screen reader utility class.</div>
<div class="u-hidden">Hide and element from the screen and from screen readers.</div>
<div class="u-sr-only">Hide an element from the screen but visible to screen readers.</div>
<div class="u-sr-only u-focusable">Hide an element from the screen but visible to screen readers. Is allowed to be focused via keyboard.</div>
<div class="u-sr-reveal">Show an element on the screen and on screen readers.</div>
<div>An element without any screen reader utility class.</div>
<div class="u-hidden">Hide and element from the screen and from screen readers.</div>
<div class="u-sr-only">Hide an element from the screen but visible to screen readers.</div>
<div class="u-sr-only u-focusable">Hide an element from the screen but visible to screen readers. Is allowed to be focused via keyboard.</div>
<div class="u-sr-reveal">Show an element on the screen and on screen readers.</div>
/* No context defined for this component. */
In order to account for accessibility as a whole, screen readers need to be considered. There are four classes that can be used to account for different intended behavior.
.u-hidden hides an element from the screen and from screen readers..u-sr-only hides an element from the screen but visible to screen readers..u-focusable hides an element from the screen but visible to screen readers. Is allowed to be focused via keyboard..u-sr-show shows an element on the screen and on screen readers..