VisuallyHidden

Content read by screen readers but invisible on screen: an icon button label, extra context ("(opens in a new tab)"), a skip link.

Usage

Icon button label

<button type="button">
  <TrashIcon aria-hidden="true" />
  <SuVisuallyHidden>Delete file</SuVisuallyHidden>
</button>

Skip link

With focusable, the content shows up when it receives focus. Press Tab in the demo.

Page content.

<SuVisuallyHidden as="a" href="#main" focusable class="skip-link">
  Skip to main content
</SuVisuallyHidden>

API

Props

Prop	Type	Default	Description
as	string	'span'	Rendered element
focusable	boolean	false	Visible while the content (or one of its children) has focus

Accessibility

• Accessible hiding (clip-path, 1px size): the content stays in the accessibility tree, unlike display: none.
• For an icon button, aria-label on the button works too; VisuallyHidden keeps the text in the DOM (automatic translation, search).