Image Alt Text Guide with Examples
For: Content writers, designers, marketers, developers
Alt text seems easy until you have to write 200 of them on a tight deadline. The hard cases — decorative images, photos with text inside, infographics, charts — are where most teams stumble. This guide categorizes images and gives the rule for each, with 20 real-world examples.
References: WCAG 2.2 SC 1.1.1 · W3C Web Accessibility Tutorials — Images
Want to audit color contrast against this checklist on real screens — instantly, from your phone?
Use AccessAudit AI — runs offline, captures photo evidence per item, exports a sharable PDF.
The Three Categories
Every image is one of these. Decide which BEFORE writing alt.
DECORATIVE — adds visual flavor only, conveys no info (background patterns, divider images). Alt = empty string ("") OR aria-hidden="true"
INFORMATIVE — conveys meaning sighted users get from the image (a photo of the product, a chart of data). Alt = describes the meaning, NOT the image
FUNCTIONAL — image is part of an interactive element (icon button, image link). Alt = describes the ACTION, not the visual ("Search", not "magnifying glass")
Decorative — 5 Examples
Hero background pattern → alt=""
Section divider line graphic → alt=""
Avatar placeholder when name is also shown next to it → alt=""
Decorative leaf/swirl in a wedding invitation → alt=""
Pure-aesthetic background photo on a hero → alt="" (the headline carries the meaning)
Informative — 5 Examples
Product photo of a blue running shoe → alt="Blue Nike Pegasus 41 running shoe, side view"
Photo of CEO at conference → alt="Sarah Chen speaking on stage at WWDC 2025"
Chart showing revenue trend → alt="Q1-Q4 2025 revenue chart: Q1 $1.2M, Q2 $1.8M, Q3 $2.1M, Q4 $2.6M" (data, not "bar chart")
Infographic with 3 statistics → alt summarizes the 3 stats in text
Map showing store locations → alt="Map showing 12 store locations across the US Northeast" + accessible alternative (table or list)
Functional — 5 Examples
Magnifying-glass icon as Search button → alt="Search"
Hamburger icon as menu toggle → alt="Open menu"
Logo image that links to homepage → alt="[Company name] home"
Trash icon as Delete → alt="Delete"
Star icon as Favorite (toggle) → alt="Add to favorites" or "Remove from favorites" depending on state
Common Mistakes
"image of..." or "photo of..." — redundant; screen readers announce "image" already
File name as alt ("DSC_0245.jpg") — useless
Stuffing keywords for SEO — Google penalizes; users don't
Repeating adjacent caption text — screen readers read it twice
Empty alt on functional image — "Unlabeled button" announced; user has no idea what it does
Run this on your phone
Point your iPhone camera at any color pair to see WCAG contrast ratio + pass/fail in real time. 100% on-device.