The screen reader utility provides styles to visually hide elements while preserving their readability to assistive technologies.
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:
below, indicating whether the styles are applied above (larger than) or below (smaller than) the breakpoint.
%is one of the following breakpoint keywords:
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
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
This is only visible below the