DEV Community

Romain
Romain

Posted on • Originally published at access-proof.com

Image Alt Text: WCAG Rules and Best Practices

#a11y #wcag

Alt text (the alt attribute on images) is how screen readers describe pictures to people who cannot see them. It satisfies WCAG 1.1.1 Non-text Content (Level A) — the most fundamental accessibility rule. Getting it right is mostly about context, not description.

WCAG 1.1.1 in one sentence

Every non-text element that conveys information needs a text alternative that serves the equivalent purpose. Decorative elements need an empty alternative so assistive tech skips them.

The four kinds of images

Informative

Conveys meaning. Alt text describes the information, not the picture. For a chart showing rising sales, use alt="Sales up 24% from Q1 to Q2", not alt="bar chart".

Decorative

Adds no information (background textures, dividers, eye-candy). Use alt="" — empty, not missing — so screen readers skip it.

Functional

Inside a link or button. Alt text describes the action, not the icon. A magnifying-glass search button is alt="Search".

Complex

Charts, infographics, maps. Use a short alt for the gist plus a longer description nearby — a caption, adjacent text, or a linked data table.

Rules that catch most failures

  • Never start with "image of" or "picture of" — the screen reader already announces "image".
  • Do not keyword-stuff. Alt text is for users, not bots (good alt text helps SEO honestly anyway).
  • Logos: the alt text is the company name, e.g. alt="AccessProof".
  • If the same information is in adjacent text, the image is decorative — use an empty alt.
  • Text in images: the alt must contain the exact text (and avoid text-in-images where you can).

Quick examples

ImageBad altGood alt

Team photo on About page"team""The AccessProof team at the 2026 a11y summit"

PDF download icon link"icon""Download the WCAG checklist (PDF)"

Decorative section divider"divider line"empty alt
Enter fullscreen mode Exit fullscreen mode




How AccessProof helps

AccessProof flags every image missing an alt attribute and every empty alt where the image appears informative — mapped to WCAG 1.1.1, with the exact selector. No tool can judge whether your alt text reads well, but AccessProof guarantees none are missing. Run a free scan to see your image findings.

Originally published on access-proof.com.

Top comments (0)