Screen reader

The screen reader utility provides styles to visually hide elements while preserving their readability to assistive technologies.

Usage

Simply add an .sr-only class to an element to visually hide it but preserve its readability to assistive technologies.

Above or below breakpoints

If you want to only visually hide an element above or below different Compass breakpoints, you can use the .sr-only__$--% class structure instead, where:

1. $ is either above or below, indicating whether the styles are applied above (larger than) or below (smaller than) the breakpoint.
2. % is one of the following breakpoint keywords: xs, sm, md, or lg.

Examples

Visibly hidden

While you can't visibly see it, there's a paragraph below this one intended only to be read by assistive technologies. Inspect the code to spot it.

If you're reading this from a screen reader or the inspector tool, hello!

Above and below the md breakpoint

The following example contains 2 paragraphs: One visible above the md breakpoint and the other visible below the md breakpoint. Resize your browser window to see it in action.

This is only visible above the md breakpoint.

This is only visible below the md breakpoint.