Dozens of utility classes with a single purpose designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.
Screen Readers
Hide content without sacrificing accessibility.
Screen Reader Only Content
Hide an element to all devices except screen readers with .sr-only
. Combine .sr-only
with .sr-only-focusable
to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
There are also responsive variants available in the form .sr-only{-breakpoint}-{up/down}
. For example, to visually hide content, except for screen readers, for a sm
or smaller screens you would use .sr-only-sm-down
.
These classes are exceptionally useful helping to follow accessibility best practices.
Heads up! There is no .sr-only-*
class created for the smallest breakpoint and no .sr-only-*-down
class created for the largest breakpoint, .sr-only-xs
and .sr-only-xl-down
respectively, since they are functionally equivalent to using .sr-only
.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<span class="sr-only-sm-down">...</span>
// Usage as a mixin
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}
Hiding Content
Force an element to be hidden (including for screen readers) with the use of .d{-breakpoint}-none
and .d{-breakpoint}-down-none
classes.
A section on the display utilities page gives more detail about how these classes and breakpoints are related.
Invisible Content
The .invisible
and .visible
classes can be used to toggle only the visibility
of an element, meaning its display
is not modified and the element can still affect the flow of the document.
The visibility utilities page gives more detail.
Useful Resources
Still have questions? There are some links to external resources avaiable in the screen reader section on the Accessibility page