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 |