Accessability

Example

Applying the accessability utility class makes the element non-visible on the display but accessible for the screen reader. Just adding the class u-sr__only removes the visuals and the visual functionality, adding the modifier u-sr__only--focusable allows the element to be visible while in focus.

Try me in a screen reader (.u-sr__only). Here is the hidden content without the modifier.

Try me in a screen reader (.u-sr__only--focusable). Here is the hidden content with the modifier.

Classes

Format: .u-sr__only--focus

Modifiers	Description	Values
focus	Removes an elements visuals but is still accessible for screen readers.	focusable

Screen readers

Example

This box contains a screen reader only text

This box contains a focusable screen reader only text

Classes

Format: u-sr__only--focusable

Modifiers	Description	Values
Default	Hides element while keeping it accessible to screen readers
focusable	Shows element when focused on	focusable