v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Screen Readers

Visually hide content without sacrificing screen reader accessibility.

Page Contents

Screen Reader Only Content #

Hide an element to all devices except screen readers with .sr-only. Use .sr-only-focusable to show an element only when it becomes focused (e.g. by a keyboard-only user). Can also be used as mixins.

There are also responsive variants available in the forms .sr-only{-breakpoint}, .sr-only{-breakpoint}-down, .sr-only{-breakpoint}-focusable, and .sr-only{-breakpoint}-down-focusable. For example, to visually hide content, except for screen readers, for a sm or smaller screens you would use .sr-only-sm-down, or .sr-only-sm-down-focusable when the element should be shown only when focused for smaller screens.

These classes are exceptionally useful helping to follow accessibility best practices.

Heads up! There is no .sr-only-* classes created for the smallest breakpoint and no .sr-only-*-down classes created for the largest breakpoint, .sr-only-xs, .sr-only-xs-focusable, .sr-only-xl-down, .sr-only-xl-focusable-down, since they are functionally equivalent to using .sr-only or .sr-only-focusable.

Title for Screen Readers

Skip to main content
<h3 class="sr-only-sm-down">Title for Screen Readers</h3>

<a class="sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
@include sr-only-focusable;
}

Image Replacement #

Visually hide the text and show an image replacement by using a background-image.

CAST Figuration

<h1 style="background-image: url('/assets/brand/figuration-solid.svg'); width: 3rem; height: 3rem;">
<span class="sr-only">CAST Figuration</span>
</h1>

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

SASS Reference #

Variables #

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name Type Default Description
$enable-utility-sronly boolean true Enable the generation of the position utility classes. Smaller segements of the position utilities can be disabled with the following $enable-* variables.
$enable-utility-sronly-common boolean true Enable the generation of the base `.sr-only` utility class.
$enable-utility-sronly-focusable boolean true Enable the generation of the base `.sr-only-focusable` utility class.
$enable-utility-sronly-responsive boolean true Enable the generation of the responsive screen reader only utility classes.
$enable-utility-sronly-responsive-down boolean true Enable the generation of the down responsive down variants of screen reader only utility classes.

Mixins #

Here are the mixins related to this grouping of utility classes that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.

sr-only #

Only display content to screen readers.

@include sr-only();

sr-only-focusable #

Use in conjunction with .sr-only to only display content when it becomes focused.

@include sr-only-focusable();