Visually hidden
Hides content from the screen but keeps it available to 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 region that sighted users recognise from its position.
- Announcing a visible change that has no words, such as a count that just changed.
When not to use
- Hiding something you do not want on screen. If it does not belong on screen, it usually does not belong in the reading order either.
- Making up for a missing label. Fix the label.
- Long explanations. If it needs that many words, show it on screen.
- Replacing text that is hard to read. Make the visible text readable instead.
Guidance
Do
Add to a short visible label, so screen reader users know what Remove applies to.
Don't
Do not hide the whole label. The button looks empty, so sighted users cannot tell what it does.
Content
What to write, and what to leave out.
- Add to the visible text instead of replacing it, so the two read as one phrase.
- Keep it short. It is a label, not an explanation.
- Check the spacing. The hidden text joins the visible text when read aloud.