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.

<h1>Page Title</h1>

<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