Skip to main content
v4 Beta now available! Try it out!

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.

Page Contents

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