When to use
Section titled “When to use”VisuallyHidden is for text meant for screen readers only: the name of an icon-only button, the caption of a table with no visible title, or a skip link.
When not to use
Section titled “When not to use”- When a visible label exists: If the screen already shows the text, do not add a hidden copy; it is read twice.
- To hide content: For content nobody should see, use
hiddenor conditional rendering; VisuallyHidden keeps the content available to screen readers. - For long descriptions: Keep hidden text short; make a long description visible.
Anatomy
Section titled “Anatomy”VisuallyHidden has one part: a <span> (or the element you give with render).
- Root: the
sr-onlyclass; clipped to a 1 px box, absolutely positioned, and kept in the accessibility tree.
Behaviour
Section titled “Behaviour”- By default the content is hidden visually and available to screen readers.
- With
focusablethe content becomes visible while it, or a link inside it, has focus (focus:not-sr-only,focus-within:not-sr-only). renderdraws elements such as<caption>or<a>.- It accepts no inline style; there are no
classNameorstyleprops.
Guidelines
Section titled “Guidelines”Let the hidden text say the action
Section titled “Let the hidden text say the action”Show a skip link on focus
Section titled “Show a skip link on focus”Use focusable for a skip link; otherwise a keyboard user cannot see where focus is.
Content
Section titled “Content”- Write it short:
Close,Open menu,Skip to content. - Use the same language as the visible text.
- Say what the button does, not the name of the icon.