Skip to content
EspañolEnglish
All components (204)

Hidden text

Typography · VisuallyHidden

What it is and when to use it

Text that is removed from SIGHT but not from the accessibility tree: the screen reader reads it, it is not seen.

When to use it

  • For what the screen says through shape and sound does not: "(opens in a new tab)" after a link, the unit of an amount, the "of 4 steps" of an indicator, the long name of a button that only shows an icon.
  • It is a span; as="div" when what goes inside is not inline.

When not to

  • To hide something from EVERYONE, hidden or display: none. This is the opposite.
  • For the name of a field whose label is not drawn, the field's own hiddenLabel prop: it also links it as a real label.
  • For a decorative icon, aria-hidden, which is the other way round: it is seen and not read.

Keyboard: it does not take part. Watch out if there is something focusable inside: on focusing it, focus would go to an invisible place.

Accessibility: it is NOT display: none or visibility: hidden, which take the text out of the tree and nobody reads it. It is the classic technique: one pixel, clipped and without line breaks, so that the browser still considers it visible text.

Fine-tuning: none. It is the class .amset-hidden-visual, which is not touched.

What it looks like

See the terms of service (opens in a new tab).

84,90 € euros, VAT included

Hidden text isn't seen, but the screen reader reads it: "terms of service (opens in a new tab)" and "84.90 euros, VAT included".

<Link href="/condiciones" target="_blank">
  condiciones del servicio
  <VisuallyHidden> (opens in a new tab)</VisuallyHidden>
</Link>

Props

Import it with import { VisuallyHidden } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
childrenrequiredReactNode—
as"div" | "span"`span` by default; `div` when there is something inside that is not inline.
classNamestringMerged with the library classes; it does not replace them.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: