Accessability

Removes an elements visuals but is still accessible for screen readers. When using --focus modifier, the element will become visible when focused, allowing keyboard users to interact with it.

Screen Reader

Using screen reader class is possible on all elements. When used on focusable elements, the element will become visible when focused, allowing keyboard users to interact with it.

Usage

/* Format */
.u-sr__only--{focus} {}

/* Examples & modifiers */
.u-sr__only--focusable {}

Modifier	Values	Description
focus	focusable	Removes an elements visuals but is still accessible for screen readers. When using --focus modifier, the element will become visible when focused, allowing keyboard users to interact with it.

Examples

Simple Screen Reader Only Utility

Applying the accessibility utility class makes the element non-visible on the display but accessible for the screen reader.

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

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

<!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-typography__variant--p" data-uid="69f0d0c4087ab" data-component="typography">
    Try me in a screen reader (.u-sr__only). Hidden element -> 
        <a class="c-link u-sr__only" href="#" target="_top" data-uid="69f0d0c408758" data-component="link">
        Here is the hidden content without the modifier.
    </a>
</p>
    <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-typography__variant--p" data-uid="69f0d0c408822" data-component="typography">
    Try me in a screen reader (.u-sr__only--focusable). Hidden element ->
        <a class="c-link u-sr__only--focusable" href="#" target="_top" data-uid="69f0d0c4087e8" data-component="link">
        Here is the hidden content with the modifier.
    </a>
</p>