States
Section titled “States”VisuallyHidden is not interactive. Its only state change is becoming visible on focus with focusable.
| State | Support | Visual change |
|---|---|---|
| Default | Yes | Invisible; stays in the accessibility tree (sr-only) |
Focus (focusable) |
Yes | The content becomes visible (not-sr-only) when it or an element inside it has focus |
Focus (no focusable) |
No | Stays invisible |
| Hover, pressed, disabled, selected | No | None |
Measurements
Section titled “Measurements”| Property | Value |
|---|---|
| Box when hidden | 1 px x 1 px, clipped (clip), absolutely positioned (sr-only) |
| On focus | Returns to normal flow (not-sr-only); its size depends on the content and the classes you give |
The hiding pattern uses no inline style; it is only the sr-only class.
Tokens
Section titled “Tokens”VisuallyHidden uses no tokens; it draws no colour, size or spacing. You style the link that shows on focus.
Motion and interaction
Section titled “Motion and interaction”| Interaction | Motion | Reduced motion |
|---|---|---|
| Showing on focus | None: the content appears without a transition | Nothing to reduce |
See the Motion page for motion details.