accessibility
Visually hidden
also called screen reader only text, sr-only, screen reader only
Content removed from the visual layout but left in the accessibility tree, so screen readers announce what the design leaves unsaid.
Every icon-only button needs a name, and the name has to live somewhere. Visually hidden text is that somewhere: real content, in the DOM, in the accessibility tree, clipped out of the picture.
The technique is specific because the obvious approaches all fail.
display: none and visibility: hidden remove the element from the accessibility
tree along with the layout. width: 0 collapses the text so some screen readers
skip it. The pattern that works keeps the element one pixel and clips it:
position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap. Tailwind ships it as sr-only, Bootstrap as
visually-hidden, and most design systems carry a copy under one of those names.
It is the exact opposite of aria-hidden, which leaves an element on screen and takes it out of the accessibility tree. One hides from the eye, the other hides from the reader, and reaching for the wrong one produces buttons that are either unnamed or announced twice.
Which word?
| If you want | say |
|---|---|
| text for screen readers that never shows on screen | visually hidden |
| hiding something from screen readers but not from eyes | aria-hidden |
| something must be spoken without stealing focus | live region |
| writing what an image says when it cannot be seen | alt text |
| focus disappears into an offscreen or hidden panel | hidden but focusable |
Related
See also: Skip link · Label in name · Honeypot field