Skip to main content
Digitaltableteur

Design system components

VisuallyHidden

Screen-reader-only content that is always visually hidden; it has no focus reveal. Renders a span by default.

Status: stable. Group: utility. Markdown version: /design-system/components/visually-hidden.md

When to use

Renders content only assistive tech perceives: the sr-only utility as a component. Use for context that sighted users get visually. It never becomes visible, so content that must appear on focus belongs in SkipLink.

When not to use

The contract records no forbidden uses.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

VisuallyHidden props
PropTypeDefaultDescriptionRequired
childrenReact.ReactNodenoneNo description in the contract.Yes
as"div" | "h2" | "p" | "span"spanElement to render (default span)No
classNamestringnoneNo description in the contract.No

Variants

  • Allowed as values: div, h2, p, span (default span).

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

VisuallyHidden rules
LevelRuleHow it is checked
MUSTRequired stories produce no axe violations at the configured severity.Automated by npm run test:stories:matrix:ci. WCAG 2.5.8.
MUSTThe accessibility tree (role, name, state) matches the committed snapshot for every required story.Automated by npm run test:stories:matrix:ci. WCAG 1.3.1, 4.1.2.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Automated by npm run test:stories:hc.
MUSTA human completed an end-to-end accessibility review of this component.Manual review, last on 2026-11-04.
MUST NOTMaintainers: Do not bypass design tokens or skip forced-colors verification at beta.Release review; not machine-checked.

Install and import

  • Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
  • Import: import { VisuallyHidden } from "@digitaltableteur/react";
  • Entry point: @digitaltableteur/react/typography exports it too.
  • Styles: import @digitaltableteur/react/style.css once at the app boundary.
  • Also available as the custom element <dt-visually-hidden>; see the custom elements manifest.

Links