When is an icon on a car-rental vehicle card decorative rather than meaningful, and what does each kind need?
answer
- same information said twice?
- delete it: is anything lost?
- decision per use, not per glyph
- hidden from the accessibility tree
- alternative states meaning, not drawing
basics
~20 sAn icon is decorative when nearby visible text already carries its meaning or it is pure ornament; hide it from assistive technology. It is meaningful when it carries information nothing else states; give it a text alternative naming that information.
solid answer
~40 sThe test is removal: if you delete the icon and no information is lost, it is **decorative** and should be hidden from the accessibility tree so assistive technology skips it. On a vehicle card, a snowflake beside the words “Air conditioning” is decorative; exposing it too makes a screen reader say the feature twice. If the same snowflake stands alone in a row of feature icons, it is **meaningful** and needs a text alternative that states the meaning (“Air conditioning”), not the drawing (“snowflake”). Because one glyph can be either, the decision is made per use, not per icon in the set. WCAG 2.2 criterion 1.1.1 Non-text Content (Level A) covers both halves: an equivalent alternative for meaningful content, and decoration implemented so assistive technology can ignore it.
go deeper
Recall the removal test: if deleting the icon loses nothing, hide it; if it loses information, give it a short text alternative that states the meaning, not the picture.
Explain why hiding decoration is half of WCAG 1.1.1 rather than a shortcut, and show how the same glyph changes kind with the text around it.
Show how you make the decision explicit per use across a product — a stated decision in the spec, a required choice in the icon component — so platform defaults never decide.
Weigh the cost of each default at scale: exposing by default floods announcements, hiding by default silently drops meaning, and neither replaces an explicit decision owned by design.
## Two kinds of icon To a person who cannot see the screen, every icon is one of two things. A **decorative** icon adds visual rhythm, reinforces a word that is already on screen, or is pure ornament; removing it loses no information. A **meaningful** (informative) icon carries information that nothing else on the screen states; removing it loses something. The distinction is not about how the icon is drawn or which set it comes from — it is about **what the surrounding content already says**. WCAG 2.2 success criterion **1.1.1 Non-text Content** (Level A) covers both halves. Non-text content presented to the user needs a text alternative that serves the equivalent purpose, and content that is pure decoration, is used only for visual formatting, or is not presented to users must be implemented so that assistive technology can ignore it. So “hide it” is not a way around the rule; it is half of the rule. ## The removal test A reliable way to decide, used in design reviews and audits: 1. Mentally delete the icon and read what remains, including any visible text right next to it. 2. If nothing is lost, the icon is **decorative**: exclude it from the **accessibility tree** (the structure assistive technology reads) so it is skipped. 3. If something is lost, the icon is **meaningful**: give it a text alternative that states exactly what was lost. 4. If the icon is the only content of a control, it is meaningful by definition, and the control needs an **accessible name** that says what the control does. ## Worked examples on a vehicle card A car-rental vehicle card is a dense mix of both kinds: | Icon on the card | Visible text beside it? | Kind | Treatment | |---|---|---|---| | Snowflake next to “Air conditioning” | Yes | Decorative | Hide from assistive technology | | Snowflake alone in a row of feature icons | No | Meaningful | Alternative: “Air conditioning” | | Suitcase followed only by the digit 3 | Only the number | Meaningful | Label the group: “Fits 3 large bags” | | Check mark next to “Free cancellation” | Yes | Decorative | Hide | | Rental company's logo in the card's corner | No | Meaningful | Alternative: the company's name | | Ornamental swoosh behind the price | — | Decorative | Hide | Two lessons come out of the table. First, the **same glyph** (the snowflake) is decorative in one place and meaningful in another, so the decision belongs to each use, not to the icon as stored in the set. Second, a meaningful icon's alternative often has to be written **together with nearby text**: the suitcase alone would be “bags”, but the reader needs “3 large bags” to get the same fact a sighted user gets. ## What a good text alternative says - **The meaning, not the drawing.** “Air conditioning”, not “snowflake”; a sighted renter does not think “snowflake” either. - **Short.** A word or a short phrase; the icon was a compressed message, and the alternative should be one too. - **No role or type word.** Not “icon”, “image” or “graphic”; assistive technology already announces what kind of thing it is, so the extra word is noise. - **Written as product copy.** It follows the same content guidelines as visible text, and it is translated with it. - **Consistent.** The same icon with the same meaning gets the same alternative everywhere, so a user learns it once. ## Why hiding decorative icons matters Exposing everything feels safer, but it degrades the experience. A screen reader user moving through a vehicle card's feature list would hear “Air conditioning, image, Air conditioning” for every row — or worse, a file name like “snowflake-24” when nobody wrote an alternative. Twenty cards on a results page turn that into hundreds of wasted announcements. Hiding decorative icons is what keeps the meaningful ones audible. The inverse error is just as real: an icon hidden by default that actually carries meaning — a standalone check mark that is the only sign of free cancellation — silently removes information for exactly the people who cannot see it. Neither default is safe on its own. ## Across platforms The model is the same on every platform a design system ships to, even though the mechanism differs. On the web and on native mobile alike, an element can be excluded from what assistive technology reads, and an element can be given a label that becomes its name. What differs is what happens to an unlabeled graphic when nobody decides: some are skipped, some are announced as a generic “image”, some read out a file name. A design system's job is therefore to make the decision **explicit** for every use — decorative, or meaningful with an alternative — so it is never left to platform behaviour that varies and is often wrong. In practice that means the designer states the decision in the spec, and the icon component asks for it rather than guessing.
- Can the same icon from the set be decorative on one screen and meaningful on another?Yes. Whether an icon is decorative depends on what the surrounding content already says, not on the glyph. A snowflake beside the words “Air conditioning” is decorative; the same snowflake alone in a feature row is meaningful. That is why the decision is recorded at each use, in the spec and in the component call, rather than stored once per icon in the set.
- A vehicle card shows a suitcase icon followed only by the digit 3. What does the icon need?The icon is meaningful, because the visible “3” says nothing about luggage. The cleanest fix is to give the group one label, such as “Fits 3 large bags”, and hide its parts, so a screen reader user hears the same fact a sighted user reads rather than a bare number. A visible word next to the number would help sighted users too.
- Who decides whether an icon is decorative, the designer or the engineer?The designer states it, because only the designer knows what the icon is meant to communicate; the engineer implements that decision. When nobody states it, the component's default decides, and defaults are exactly where decorative icons get announced and meaningful ones get hidden. Review then checks the stated decision against what assistive technology actually announces.
A museum audio guide describes the paintings, not the picture frames; describing every frame would bury the paintings, and skipping a painting would lose the exhibit.
saying these in an interview costs you the question
- Every icon needs a text alternative, so label all of them.
- The alternative should describe the drawing, such as “snowflake”.
- Whether an icon is decorative is fixed by the icon file in the set.
- A decorative icon needs no handling; unlabeled graphics are always skipped.
- Hiding decorative icons is optional polish, not part of WCAG 1.1.1.