image-alt high
Images must have alternate text (missing alt attribute)
An img has no alt attribute, so screen readers fall back to reading the filename instead of describing the picture.
What you see
Images must have alternate text Element has no alt attribute and is not marked as decorative <img src="/uploads/IMG_4023.jpg">
What’s actually happening
axe flags an `<img>` with no `alt`. To a screen reader user, that image is announced as its src, so they hear "I M G underscore 4 0 2 3 dot j p g" or a long hashed CDN path. Informative images vanish from the page's meaning; decorative ones turn into noise. Note the difference: a missing `alt` attribute is a violation, while `alt=""` (empty but present) is valid and means decorative.
Common causes
- CMS or user-uploaded images inserted with no alt field filled in.
- Developers writing `<img>` from a data loop without mapping an alt value from the record.
- Decorative images that should carry `alt=""` but instead have the attribute omitted entirely.
- Icon fonts or SVGs swapped for `<img>` without anyone adding text alternatives.
- Lazy-load or framework wrappers that strip or never forward the alt prop to the rendered tag.
How to fix it
- Decide first whether the image carries meaningIf it conveys information (a chart, a product photo, a logo that's also a link), it needs descriptive alt. If it's pure decoration (a divider, a background flourish), give it `alt=""` so screen readers skip it. The wrong move is omitting the attribute — that's what triggers the rule.
- Write alt that states function, not appearanceDescribe what the image does or tells the user, not its pixels. `alt="Floor plan, two bedrooms"` beats `alt="image of a floor plan"`. Skip "image of" / "photo of" — the screen reader already says "graphic." Keep it tight; one line.
- Handle the data-driven cases at the sourceFor looped output, map an alt field per record: `<img src={p.img} alt={p.title} />`. Make the alt field required where editors upload images so it can't ship empty. A CMS with no alt input is the root cause more often than the template.
- Give linked and icon images a text alternativeAn image wrapped in an `<a>` with no other text must have alt describing the destination, or the link reads as nothing (see link-name). For an `<img>` icon button, the alt is the action: `alt="Delete"`, not `alt="trash can"`.
Stop it recurring
Make the alt field required in your CMS and add an axe check in CI so an image without an alt decision can't merge.
Related errors