What are the different ways to visually hide content (and make it available only for screen readers)?

TL;DR

Use a tested visually-hidden utility that clips an element to a tiny, absolutely positioned box while leaving it in the accessibility tree. Do not use display: none, visibility: hidden, or the hidden attribute for screen-reader-only text because they normally hide it from assistive technology too. If the hidden element is focusable, reveal it on :focus or :focus-within so sighted keyboard users can see it.

What are the different ways to visually hide content (and make it available only for screen readers)?

A visually-hidden utility

A robust utility combines several declarations instead of moving content thousands of pixels off-screen:

.visually-hidden:not(:focus, :focus-within, :active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

The :not(:focus, :focus-within, :active) exception makes a focusable element such as a “Skip to main content” link—or a container with a focused descendant—visible when a keyboard user reaches it. A project can instead use the maintained visually-hidden or sr-only utility from its existing framework, but should verify the exact version and focus behavior.

Typical uses include supplying a text label for an icon-only control or adding context to a terse link. Prefer an ordinary visible label whenever the information helps everyone.

<button type="button">
  <svg aria-hidden="true" focusable="false"><!-- Icon paths. --></svg>
  <span class="visually-hidden">Close dialog</span>
</button>

Techniques with different semantics

Choose a technique based on who should receive the content:

opacity: 0, off-screen positioning, and large negative text-indent values can leave an invisible element interactive or create confusing scroll and focus behavior. A zero-sized element can also be omitted or handled inconsistently by assistive technology. These are poor substitutes for a tested utility.

Test the accessible result

Inspect the accessibility tree and accessible name in browser DevTools, navigate with only the keyboard, and test representative screen-reader and browser combinations. Confirm that hidden text does not duplicate a visible label and that every focusable element becomes visually apparent when focused.

Further reading

• Hiding content (WebAIM)
• Skip link tutorial (W3C WAI)
• aria-hidden (MDN)

Exercises