What WCAG asks for
Every image that carries information needs a text alternative that serves the same purpose. Decorative images need an empty alternative, so assistive technology can ignore them. In HTML that means every <img> has an alt attribute: either a short description, or alt="".
A missing alt attribute is the failure automated checks report. An empty alt="" is a deliberate choice that says "this image is decoration".
Decide what the image is for
Before writing alt text, ask what a visitor would lose if the image were gone.
- It shows information (a product photo, a chart, a team member): describe what matters in that context. "Navy wool coat with a hood, front view."
- It is a link or a button (a logo linking home, a search icon): describe the destination or action, not the picture. "Home", "Search".
- It contains text (a banner with an offer): put the same text in the alt.
- It is decoration (a background flourish, a stock photo next to a heading that already says it all): use
alt="".
Examples
<!-- Informative -->
<img src="coat-navy.jpg" alt="Navy wool coat with a hood, front view">
<!-- Image link: describe where it goes -->
<a href="/"><img src="logo.svg" alt="Smith & Partners, home"></a>
<!-- Decorative: empty alt, not missing alt -->
<img src="divider.svg" alt="">
<!-- Image button -->
<input type="image" src="search.png" alt="Search">
<!-- Inline SVG icon that carries meaning -->
<svg role="img" aria-label="Rated 4 out of 5"> ... </svg>
Writing good alt text
- Keep it short: one sentence, usually under 125 characters.
- Do not start with "image of" or "picture of". Screen readers already announce it as an image.
- Do not repeat the caption or the text right next to the image. Use
alt=""instead. - Do not stuff keywords. Alt text written for search engines instead of people reads badly and helps neither.
- For charts and infographics, give the key takeaway in the alt and put the full data in the page text or a table.
Fixing it at scale
On a CMS, missing alt text usually comes from images uploaded without a description, from themes that output <img> without an alt attribute, and from sliders and galleries built by plugins.
- In WordPress, fill in the "Alternative text" field in the media library. It is used wherever that image is inserted.
- For product catalogs, a reasonable default is the product name plus the variant, generated by the template, then improved for key products.
- Make sure your templates always print an
altattribute, even when it is empty, so decorative images stay silent.
What automated checks miss
Software can tell that alt text is missing. It can not tell whether "photo" or "banner-final-2" describes anything. Judging the quality of alt text needs a person, which is why it is part of a manual audit.
Last updated October 18, 2026.