VisuallyHidden

Role and semantics

VisuallyHidden renders a <span> by default, with no role. The sr-only pattern (clipping to a 1 px box, absolute position) hides the content visually and keeps it in the accessibility tree; it does not use display: none or visibility: hidden. When render draws <caption> or <a>, the meaning comes from that element.

Keyboard

Key	Behaviour
Tab	Plain VisuallyHidden does not take focus. With focusable drawing an <a>, the link joins the tab order and becomes visible on focus.
Enter	On a skip link, goes to the target (href="#main").

Focus

With focusable, the content shows when it or an element inside it has focus, so focus never sits on something invisible (WCAG 2.4.7). The element you give with render sets the focus ring; give a skip link a visible style.

Screen reader output

Example	Announced
<button><Icon /><VisuallyHidden>Close</VisuallyHidden></button>	“Close, button”
<VisuallyHidden render={<caption />}>Item list</VisuallyHidden>	Table name: “Item list”
<VisuallyHidden focusable render={<a href="#main" />}>Skip to content</VisuallyHidden>	“Skip to content, link”

If visible text already exists, do not add a hidden copy; a screen reader reads both.

Contrast

While hidden there is no visible output, so there is nothing to measure. The colour of content shown by focusable comes from the element you give with render. That pair is not covered by the token test and is not measured.

WCAG 2.2

Criterion	How VisuallyHidden meets it	What the product team does
1.1.1 Non-text content	Gives an icon a name with hidden text.	Give every icon-only control a hidden name.
1.3.1 Info and relationships	Keeps the relationship through elements such as <caption>.	Name tables and fields.
2.4.1 Bypass blocks	A skip link can be built with focusable.	Make the skip link the first focusable element on the page.
2.4.7 Focus visible	focusable content becomes visible on focus.	Verify the contrast and ring of the element shown on focus.
4.1.2 Name, role, value	Hidden text joins the accessible name of the element that contains it.	Do not duplicate a visible label with hidden text.