Visually hidden

Hide copy from the visual layout while keeping it available to assistive technology.

Examples

Slots

NameDescription
defaultText or markup to expose to screen readers only.

Usage

Visually hidden clips its contents out of the visual layout. Screen readers still read the slotted text in document order.

Do

  • Add a short phrase that explains a visual-only state (for example “complete” next to a checkmark).
  • Use it when a nearby heading already names something for sighted users but assistive technology still needs the extra words.

Don’t

  • Don’t hide error or status text that everyone should see.
  • Don’t use it for decorative graphics — hide those with alt="" or aria-hidden.
  • Don’t wrap native type="hidden" inputs; they are already omitted from the visual layout.