Free community resource

Missing Alt Text

Common failures

Missing alt text is one of the most frequently occurring web accessibility
failures. It occurs when an img element has no alt attribute, or when the
alt attribute is present but empty on an image that conveys meaningful
information. Screen reader users receive no information about the image
and in the worst case hear a raw filename announced instead.
[1]


How it fails users

When an img element has no alt attribute at all, most screen readers will
announce the image filename — for example "img_20240312_143022.jpg" or
"hero-banner-v3-final-FINAL.png". This is meaningless to a user who cannot
see the image and actively wastes their time.
[2]

When an informative image has alt="" it is treated as decorative and skipped
entirely, meaning the information it conveys is lost to screen reader users.


How to detect it

Automated scanners including axe-core reliably detect missing alt attributes.
However they cannot detect whether existing alt text is meaningful — a button
with alt="image" passes the automated rule but fails in practice.
[3]

Manual checks to perform:

  • Tab to every image and listen to what a screen reader announces
  • Check that the announcement conveys the same information as the image
  • Verify decorative images use alt="" and are not announced

How to fix it

Image type Correct treatment
Informative Write alt text describing the content and purpose
Decorative Use alt="" — do not omit the attribute
Functional (linked/button) Describe the action, not the image
Complex (chart/graph) Short alt text plus full description in page
Text in image Alt text must contain exactly the same text

Common mistakes

Omitting the alt attribute entirely. Always include alt — even decorative
images need alt="" to tell screen readers to skip them.

Using the filename as alt text. CMS systems sometimes auto-populate alt
text from the filename. Always replace this with a meaningful description.

Starting with "Image of" or "Photo of". Screen readers already announce
the element as an image. This is redundant and wastes the user's time.
[1]


References

  1. W3C Web Accessibility Initiative. Understanding Success Criterion 1.1.1: Non-text Content. https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
  2. W3C Web Accessibility Initiative. Images Tutorial. https://www.w3.org/WAI/tutorials/images/
  3. WebAIM. Alternative Text. https://webaim.org/techniques/alttext/

Last edited Apr 5, 2026, 7:25 PM · P**** J****