Franklin Street - Screen Readers - Utilities - Components

Screen Reader Only

Using sr-only will hide content visually but still allow screen readers to access content or text.

Note: Resize your browser to see this in action.

Using sr-undo will undo sr-only to show the hidden content visually.

Note: Resize your browser to see this in action.

Available CSS classes to hide content visually:

Available CSS classes to undo sr-only and show content visually:

<div class="sr-only">This content will be hidden visually at all breakpoints.</div>

Note: There's not really any need for sr-undo itself without the breakpoint class, as content is naturally shown by default.

<div class="sr-undo">This content will be shown visually at all breakpoints.</div>