Level A

53.1% of home pages have at least one image missing alt text

1.1.1 Non-text Content

In Plain Language

SC 1.1.1 requires a text alternative for every non-text element that conveys information, so the content can be re-rendered through a different sensory modality -- spoken by a screen reader, routed to a braille display, or enlarged as text [1]. For an <img>, that alternative is the alt attribute; for an inline <svg>, it is role="img" plus an accessible name from aria-label or a child <title>; for an <img> inside a <picture>, the alt still lives on the <img>.

When the image is purely decorative, mark it so assistive technology can skip it: alt="" on an <img>, or aria-hidden="true" / role="presentation" on an inline <svg>. An empty alt is not the same as a missing alt -- a missing alt leaves the element with no accessible name, and many screen readers fall back to announcing the filename from src [1].

Why It Matters

  • A non-text element without a text alternative enters the accessibility tree with no accessible name. Screen readers have nothing to announce for it, so users navigating by headings, links, or images hit an unlabelled node and have to guess what it is from surrounding context -- or from the filename, which most engines announce as a last-resort fallback.
  • The failure is programmatic, not visual: the image still renders for sighted users, which is why missing alt survives visual QA and ships to production. 53.1% of home pages in the WebAIM Million analysis had at least one image missing alt text [2], making it the single most detected WCAG failure in the study.
  • Text alternatives are also the fallback when the image itself fails -- broken src, blocked CDN, slow network, reader mode, or a user agent that does not load images. In each of those cases the browser exposes the alt string in place of the pixels, which is why a filename or empty string is not a neutral default.
  • Clear, literal alternatives help readers who rely on plain, structured text to parse a page, including the large share of adults who score at or below Level 2 on the PIAAC prose literacy scale [3].

Examples

Do: Meaningful alt text

The alt string describes the content and its purpose in context, so a screen reader user gets the same information a sighted user gets from the photo [1].

<img
  src="team-photo.jpg"
  alt="Five volunteers sorting books at the 2024 spring literacy drive"
>
Don't: Missing or useless alt text

With no alt attribute, the element has no accessible name and most screen readers fall back to announcing the filename from src. Setting alt to the filename is the same failure with extra steps.

<!-- FAILS: no alt attribute at all -->
<img src="DSC_0482.jpg">

<!-- FAILS: filename is not a text alternative -->
<img src="photo.jpg" alt="DSC_0482.jpg">
Do: Empty alt for decorative images

An empty alt removes the image from the accessibility tree so screen readers skip it entirely -- the correct treatment for borders, dividers, and images whose meaning is already conveyed by adjacent text [4].

<img src="decorative-border.svg" alt="">
Don't: Decorative image with alt text

A decorative divider with a text alternative forces the screen reader to announce noise between meaningful content. Use alt="" instead.

<img src="divider.svg" alt="horizontal line divider decoration">

How to Fix It

  1. Decide whether the element carries information. If removing it would change what a sighted user understands, it is informative and needs a text alternative. If it is pure decoration, mark it so assistive technology can skip it: alt="" on <img>, or aria-hidden="true" on an inline <svg>.
  2. Write the alternative for the purpose, not the pixels. The alt string should replace the image in the sentence it lives in. A product photo on a buy button needs the product name; the same photo in an editorial gallery needs the scene. Same pixels, different accessible names.
  3. Do not prefix with "image of" or "picture of". The accessibility tree already exposes the element as role="img", and screen readers announce that role before reading the name.
  4. Inline <svg> needs explicit naming. An inline <svg> without role="img" and an accessible name is announced inconsistently across engines. Add role="img" plus aria-label, or a child <title> referenced by aria-labelledby. Hide decorative icons with aria-hidden="true".
  5. Complex images need a longer description. Charts, diagrams, and infographics cannot be compressed into one alt string. Put the short summary in alt, then link to or expose a longer description via <figure>/<figcaption>, aria-describedby, or adjacent body text.
  6. CSS background images are invisible to assistive technology. If a background-image carries meaning, either move it into an <img> with alt or expose the information in adjacent text. The CSS layer has no hook for an accessible name [1].

References

  1. [1] W3C (2023). Understanding Success Criterion 1.1.1: Non-text Content. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html ↩ ↩ ↩ ↩
  2. [2] WebAIM (2026). The WebAIM Million: An accessibility analysis of the top 1,000,000 home pages. WebAIM, Accessed 2026-04-07. https://webaim.org/projects/million/ ↩
  3. [3] OECD (2023). Survey of Adult Skills (PIAAC). OECD, Accessed 2026-04-07. https://www.oecd.org/en/about/programmes/piaac.html ↩