Visually Hidden

Content for assistive technology only. VisuallyHidden renders a native <span> clipped to a one-pixel box (the sr-only technique, never display: none). Screen readers read the content; sighted users never see it. The content also stays in copied and searched text.

When to use

• State context the visual design already carries: "(opens in a new tab)" on an external link, a caption on a layout table.
• Give a screen reader a text alternative for content it cannot read, such as a decorative chart.
• Style the message of a LiveRegion, which builds on the same technique.

When not to use

• To name an icon-only control. Voice-control software skips a control whose only label is hidden DOM text, so use aria-label, as IconButton's required label prop does.
• To hide content from assistive technology too. Use the hidden attribute or aria-hidden.
• For a link that appears on focus. Use SkipToMainLink.

1import { Anchor } from "@ngrok/mantle/anchor";2import { VisuallyHidden } from "@ngrok/mantle/visually-hidden";3 4<p>⋯5	Read the{" "}6	<Anchor href="https://status.ngrok.com" target="_blank" rel="noreferrer">⋯7		status page8		<VisuallyHidden> (opens in a new tab)</VisuallyHidden>9	</Anchor>{" "}10	before you file an incident.11</p>;

Polymorphism

VisuallyHidden accepts an asChild prop. When true, it renders its single child instead of its default <span>, forwarding its class names, data-* attributes, and ref onto that child. When the hidden content should be a more semantic element (a <caption>, a <legend>, a heading), reach for asChild.

1import { VisuallyHidden } from "@ngrok/mantle/visually-hidden";2 3<table>⋯4	<VisuallyHidden asChild>⋯5		<caption>Monthly revenue by region</caption>6	</VisuallyHidden>7	<thead>⋯8		<tr>⋯9			<th>Region</th>10			<th>Revenue</th>11		</tr>12	</thead>13	<tbody>⋯14		<tr>⋯15			<td>North America</td>16			<td>$1,204</td>17		</tr>18		<tr>⋯19			<td>Europe</td>20			<td>$986</td>21		</tr>22	</tbody>23</table>;

API Reference

VisuallyHidden

All props from span, plus:

Data attributes