Skip to main content

Patterns

Screen Reader

The .sr-only utility will hide elements visually but keep them visible to screen readers.

This text will be read aloud and visible to users. However, this text will be read aloud by screen readers. 
<a href="#">This text will be read aloud and visible to users.</a>
<a class="sr-only" href="#">However, this text will be read aloud by screen readers.</a>

Focusable

Source: src/utilities/screen-reader/screen-reader-only-focusable

Will appear when focused on. 
<a class="sr-only sr-only-focusable" href="#">Will appear when focused on.</a>