Skip to content
Components

VisuallyHidden

Hides content visually while keeping it in the accessibility tree - for screen-reader-only labels and captions that must not take up layout space. RSC-safe.

Search the material library

Usage

import { VisuallyHidden, VisuallyHiddenProps } from "@instruments/materia-ui/components/visually-hidden";

Best practices

  • Use for screen-reader-only text (e.g. a link's full context) - for icon-only Buttons prefer the aria-label prop the component already requires.

  • Never hide interactive or focusable content inside it - sighted keyboard users would tab into something they cannot see.

Props

Also exports

  • componentVisuallyHidden
  • typeVisuallyHiddenProps

Composition

Used by

AnimatedNumber, Avatar, Badge, Breadcrumb