Visually hidden
A utility that hides content from the screen while retaining readability by screen readers.
When to use
- Giving a control a fuller name than the layout has room for, such as saying which row a button belongs to.
- Naming a landmark or a region that is obvious on screen from its position alone.
- Announcing a change that is visible but has no words, such as a count that just moved.
When not to use
- Hiding something you do not want on screen. If it does not belong there, it usually does not belong in the reading order either.
- Making up for a missing label. Fix the label.
- Long explanations. Anything worth that many words is worth showing.
- Instead of making something legible. Hidden text is not a substitute for readable text.
Guidance
Do
Extend a short visible label into a full one, so a screen reader hears which Remove this is.
Don't
Do not hide the whole label. The button is now empty on screen, so nobody looking at it knows what it does.
Content
What to write, and what to leave out.
- Continue the visible text rather than replacing it, so the two read as one phrase.
- Keep it short. It is a label, not an explanation.
- Mind the spacing, since the hidden text joins the visible text when read aloud.