Accessibility

Visually hidden text

Text for screen readers only: a transcript, a separator in a tile name, a label that the design shows another way.

01

Examples

A tile name: the comma is visually hiddenOpen “A tile name: the comma is visually hidden” at full size

Phone 390 · Light

02

When to use it

When the visual already says it and assistive technology needs it in words. Never to hide content from sighted readers that others get.

Live: Tiles, agent figures, tablet rail.

03

Anatomy

Utility
.vh: 1px, clipped, off-layout, no wrapping.
04

Behaviour

Phone, tablet, desktop
Same everywhere.
Motion
None.
05

Accessibility

Prefer real visible text. Use .vh for agent figure transcripts, the comma in tile names (“Unresolved, Book”) and the tablet rail titles.

06

Words

Write it as a sentence a listener would understand without the picture.

07

Code

Classes: .vh. Styles in site/assets/css/site.css.

<span class="tile-name">Agents<span class="vh">, </span><span class="tile-kind">Built and run</span></span>