Visually Hidden

The Visually Hidden utilities hide elements visually while keeping them accessible to screen readers and other assistive technologies. These utilities are essential for creating accessible interfaces where you need to provide information for screen reader users without affecting the visual design.

Usage

Apply .visually-hidden or .sr-only to elements that should be available to assistive technologies but hidden from visual users. Use the focusable variants for elements that should become visible when they receive keyboard focus, such as skip links.

<h1>Page Title</h1>
<a href="#main-content" class="visually-hidden-focusable">
  Skip to main content
</a>

<button>
  <span class="visually-hidden">Close dialog</span>
  <svg aria-hidden="true"><!-- close icon --></svg>
</button>

<div class="sr-only">Screen reader only instructions</div>

The utilities ensure that hidden content remains in the accessibility tree while being completely invisible to sighted users, maintaining proper focus order and keyboard navigation.

Class Patterns