1.1.1 Non-text Content

What WCAG 1.1.1 Requires

Every image, icon, form control image and other non-text element needs a text alternative that serves the same purpose, so a screen reader can announce it or a search engine can index it.

New to this criterion? Read our plain-English guide, WCAG 1.1.1 Non-text Content Explained in Plain English, with examples and code.

Can AccessBell Test This Automatically?

Yes. AccessBell's scanner runs axe-core, which includes 7 rules that catch code-level failures of this criterion:

• aria-meter-name — Ensure every ARIA meter node has an accessible name (details (opens in a new tab))
• aria-progressbar-name — Ensure every ARIA progressbar node has an accessible name (details (opens in a new tab))
• image-alt — Ensure <img> elements have alternative text or a role of none or presentation (details (opens in a new tab))
• input-image-alt — Ensure <input type="image"> elements have alternative text (details (opens in a new tab))
• object-alt — Ensure <object> elements have alternative text (details (opens in a new tab))
• role-img-alt — Ensure [role="img"] and [role="image"] elements have alternative text (details (opens in a new tab))
• svg-img-alt — Ensure <svg> elements with an img, image, graphics-document or graphics-symbol role have accessible text (details (opens in a new tab))

This criterion is included in: WCAG 2.2 AA Checker, WCAG 2.1 AA Checker, ADA Compliance Checker, Section 508 Checker, EN 301 549 Checker.

How to Test It by Hand

Turn off images or read the page with a screen reader and check that every icon, photo and image button makes sense without seeing it.

Common Failures

• A meaningful image has no alt attribute, or alt text that just repeats the file name.
• A decorative image has descriptive alt text that adds noise for screen reader users.
• An icon-only button (a magnifying glass, a trash can) has no accessible name at all.

Example Fix

1. Describe the purpose, not the pixels. Write alt text that says what the image does or shows in context, for example "Download the 2026 price list" for a linked icon.
2. Mark decorative images as decorative. Use an empty alt="" so screen readers skip images that add nothing, such as background flourishes.
3. Keep it short. One sentence is usually enough. Put longer descriptions of charts or diagrams in nearby text.

<!-- Informative image: describe its purpose -->
<img src="/team.jpg" alt="Our support team at the Denver office">

<!-- Image inside a link: describe where the link goes -->
<a href="/pricing"><img src="/icon-tag.svg" alt="Pricing"></a>

<!-- Decorative image: empty alt so it is skipped -->
<img src="/divider.svg" alt="">

WCAG 1.1.1 Questions