What is an alt tag and how should I use it?
Alt text in a nutshell
Alt text (often mis‑labelled an “alt tag”) is the little string you drop into an image’s alt="" attribute so a screen‑reader can announce what the image is—or what it does—when the picture itself isn’t available. It’s invisible to sighted users, but vital for blind and low‑vision visitors, people on flaky connections, and anyone who likes their browser with images turned off to save data.
Why it matters
- Context for screen‑readers – Without alt text, the software will read the filename (“IMG_8654‑final‑edit‑v2.jpg”)—hardly riveting prose.
- Keyboard, voice and braille support – Users who navigate by links alone rely on alt text to understand what each image‑link does
- Fallback when images break – If the picture times out, the alt text still loads, so nobody’s left guessing.
- SEO bonus – Search engines index it, which never hurts.
Writing alt text: the Goldilocks test
| Image type | Bad (too vague) | Better (just right) | When to leave it empty |
|---|---|---|---|
| Product photo | alt="image" | alt="Blue canvas backpack, front view" | Never—product shots always need alt text |
| Functional icon (link) | alt="" | alt="Download PDF timetable" | Only if the same text link appears right next to the icon |
| Decorative swirl | alt="swirl" | Empty (alt="") | Decorative elements should be skipped entirely so they don’t clutter the reading order |
Rule of thumb: if removing the image would make the page confusing, give it alt text. If it’s purely ornamental, set alt="" so assistive tech glides past without a peep.
Keep it short, keep it honest
- Describe what you’d say if you were on the phone.
Good: “Team photo: four developers high‑fiving at their desks.”
Overkill: “A candid high‑resolution photograph of four casually dressed developers…” - Skip “image of…”. Screen‑readers already announce that it’s an image.
- No keyword‑stuffing. Alt text isn’t your secret SEO dumping ground.
- No hidden sales copy. Phone numbers and strap‑lines belong in real text, not lurking in
alt="".
AI to the rescue… sometimes
Tools like Microsoft’s automatic image descriptions or AI‑powered CMS plug‑ins can generate a first draft, but always sanity‑check the output. At best they waffle; at worst they hallucinate details that aren’t there. A 250‑word novella about “a golden retriever philosophically gazing into the sunset” is not what your visitors (or WCAG auditors) need.
Quick checklist before you hit publish
- Every
<img>has analtattribute—even if it’s empty. - Alt text is concise (usually under 125 characters) but still conveys purpose.
- Decorative images use
alt=""androle="presentation"or CSS backgrounds. - Linked images explain the destination or action.
- Complex graphics (charts, infographics) get a short alt plus a nearby long description or data table.
Nail those five and you’ll tick WCAG 2.2’s Success Criterion 1.1.1 – Non‑text Content and make life easier for a huge slice of your audience—all without adding more than a sentence or two per image.
Alt text: not glamorous, but absolutely game‑changing. Now go forth and describe like a pro.
