Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

contentRauno

Label HTML Illustrations

MUST

MUST: Give a div-built illustration or chart `role="img"` + `aria-label` on the wrapper and `aria-hidden="true"` on its inner nodes, so screen readers announce it once instead of walking every group.

Give an illustration built from HTML an explicit aria-label so it is announced as one image, not as a DOM tree

<div role="img" aria-label="Revenue grew 40% in Q3">
  <div className="bar" aria-hidden="true" />
</div>

Bad

Good

Why it matters

A chart or illustration assembled from divs has no single accessible node, so assistive tech walks it element by element and reads out a stream of meaningless groups. Put role="img" plus an aria-label that states what the picture conveys on the wrapper, and mark the inner nodes aria-hidden, so the whole thing collapses into one announcement.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.