WCAG 1.1.1 Non-text Content

Success criterion 1.1.1 makes sure that people who cannot see an image still get the information it carries. Screen reader users hear the text alternative, and so do people whose images failed to load. It is level A, the first criterion of WCAG, and part of EN 301 549 (clause 9.1.1.1).

What the criterion requires

All non-text content — images, icons, charts, image buttons, SVGs — must have a text alternative that serves the equivalent purpose. For some types of content WCAG asks for less:

• Controls and input: an image that is a button or accepts input needs a name that describes its purpose ("Add to wishlist", not "heart").
• Time-based media (video, audio): the text alternative must at least identify it; captions and descriptions are covered by 1.2.x.
• Tests that would be invalid in text, and content meant to create a sensory experience (for example a piece of music): at least a descriptive identification.
• CAPTCHA: a text alternative that describes its purpose, plus an alternative CAPTCHA that uses a different sense (for example audio as well as visual).
• Decoration, formatting, invisible content: must be implemented so assistive technology can ignore it — in HTML, alt="" or a CSS background image.

Typical failures on an online shop

• product photos with no alt, or with the file name (IMG_4021.jpg) read out instead;
• icon-only buttons for search, cart, account or close with no accessible name;
• promo banners with the offer ("−30 % this weekend") baked into the image and no alt text;
• payment and trust badges, size charts or rating stars shown only as images;

How to check it

Automated: our checker finds images, image inputs, objects, SVGs and elements with role="img" that have no text alternative, as well as progress bars and meters without a name (rules image alt, input image alt, SVG image alt and related). It cannot judge whether existing alt text is correct, so a missing finding does not mean the criterion is met.

By hand: turn off images in the browser or use a screen reader and walk through a product page. For each image, ask: does the alt text give the same information, or is the image decoration and silent? Check icon buttons by tabbing to them and listening to their name.

How to fix it

• Write alt text in the product editor of your platform (Shopify, WooCommerce and most others have an "alt text" field for every media item).
• Describe what matters in context: "Blue linen shirt, back view" rather than "shirt".
• Give icon buttons a visible label or an aria-label; hide the icon itself from assistive technology.
• Use alt="" for purely decorative images, not a missing attribute.
• For charts and infographics, add a short summary or a data table.

Related criteria

• 1.4.5 Images of Text — use real text instead of text in pictures.
• 1.2.1 Audio-only and Video-only (Prerecorded) — alternatives for media files.
• Free check of one page — find images without alt text on your site.

Frequently asked questions

Does every image need alt text under WCAG?

Every image needs a text alternative that serves the same purpose. Purely decorative images are the exception: they get an empty alt attribute (alt="") so screen readers skip them.

What should the alt text of a product photo say?

What a buyer needs to know from the picture: the product, and the colour, pattern or detail it shows. Do not start with "image of" and do not repeat the product title word for word if it is right next to the photo.

Do icon buttons fall under 1.1.1?

Yes. A control such as a magnifier, cart or close icon must have a name that describes its purpose, for example "Search" or "Open cart". 4.1.2 Name, Role, Value adds further requirements for controls.

Can an automated checker test alt text?

It can find images, icons and SVGs with no text alternative at all. It cannot tell whether the alt text that is there is accurate or useful — that needs a person.