Skip to content

Accessibility Modifiers

Accessibility modifiers are utility classes designed to target the accessibility explicitly.

Available utility classes

  • .sr-only - hides an element visually but keeps it accessible for screen readers. Useful for adding extra context for assistive technologies without displaying it on the page.

Example

Here is an example of using the .sr-only class to provide accessible labels the correct way in a given scenario.

HTML
Buttons may get ignored by some assistive technologies (for example VoiceOver) if they do not have content inside.
<button aria-label="Close menu">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
    </svg>
</button>
HTML
This is where the sr-only solution comes into play ensuring a more robust approach to accessibility.
<button>
    <span class="sr-only">Close menu</span>
    <svg class="icon">
        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
    </svg>
</button>

LESS

Accessibility Modifiers styles

Here are standard accessibility modifier styles:

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

Usage notes

  • The .sr-only class is commonly used to add labels, instructions, or context for screen readers.
  • It should be used on elements that should not be visible but must be accessible for users relying on assistive technology.