Pure decoration must be hidden from assistive technology
Aliases: empty alt · aria-hidden · decorative graphic
What it is
Dividers, flourishes, background blobs, illustrations that carry no fact should be silent to assistive technology. Give img an empty alt="", mark inline SVG aria-hidden="true", or put the graphic in a CSS background so it never enters the accessibility tree. A missing alt is not an empty alt: many readers fall back to the filename. This leaf assumes the graphic has already been judged decorative. How to judge, and not repeating adjacent text, are the next two.
Why it happens
Readers dump every image node they meet into the speech stream. Decorative graphics have no payload and still occupy the virtual buffer, breaking the rhythm between headings. Hiding has to be explicit. With no alt at all, user agents often speak the filename or the tail of src — “gold-swirl.png” gets announced. CSS background images stay out of the tree by default, which is one hiding mechanism; if that background actually contains words that must be read, the graphic vanishes for AT while remaining visible — that is a misclassification as decoration, not a successful hide.
A focusable decorative control (an empty link wrapping a flourish) still receives focus even with empty alt; the reader may say “link.” Hide the graphic without leaving an empty focusable shell.
Studying it
In browse mode, walk a marketing page from the start to main content and count meaningless graphic / filename announcements. Compare missing alt, empty alt, aria-hidden, and CSS background.
Independent variables: hiding method, whether the graphic is focusable. Dependent variables: count of meaningless announcements, extra traversal time, empty-link focus stops.
NVDA+Firefox and VoiceOver+Safari do not fall back the same way on missing alt; use at least two stacks. Automation can flag missing alt; whether empty alt is correct still needs a human to say it is truly decorative.
Where it stops holding
Icon buttons are not decoration and need a function name. Charts are not decoration. Focus rings and required asterisks implemented as images must not be hidden. User-agent list markers are usually already handled; each bullet does not need alt. If print styles paint a background image as information, the on-screen “CSS hide” becomes a gap on paper.
Applying it
- Once it is decoration:
alt=""onimg,aria-hidden="true"on decorative SVG, or move it to a CSS background. - Do not omit the
altattribute and “let the browser decide.” - Do not wrap flourishes in focusable empty links or empty buttons.
- Verify: jump heading to heading with a reader; no filenames or “graphic” in between. Tab through; do not land on a nameless decorative focus stop.