WCAG 1.1.1 Non-text Content: what it means and how to fix it

Level A · Perceivable · Updated

Short answer: Every meaningful image, icon and image button needs a text alternative that says what it shows or does; purely decorative images need an empty alt so screen readers skip them.

What it requires

Anything that is not text, such as photos, product images, icons, logos, charts and image buttons, must have a text alternative that serves the same purpose. If an image is purely decorative, it should be marked so assistive technology ignores it. In HTML that usually means a meaningful alt attribute, or alt="" for decoration.

Who it affects

Blind and low-vision visitors who use screen readers such as JAWS, NVDA or VoiceOver. Without alt text a screen reader announces the file name ("IMG_4821.jpg") or just "image", and a linked image or icon button becomes impossible to understand.

How it shows up in ADA website claims

Missing alt text is one of the most frequently described barriers in ADA website complaints. Complaints typically say the plaintiff, using a screen reader, could not identify products, could not tell what a linked image or icon did, or could not complete a purchase because a key button was an unlabeled image. It is also the easiest failure for an automated scanner to find, which is why it shows up so often.

How to check your site

  1. Run an automated scan: it flags images with no alt attribute at all.
  2. Look at what the alt text actually says. Automated tools cannot tell whether alt="image" or alt="product-photo-3" is useful. It is not.
  3. Check icon-only links and buttons (cart, search, menu, social icons). These are the ones that break navigation.
  4. Turn on a screen reader (VoiceOver on Mac: Cmd+F5) and tab through the page.

How to fix it

Write alt text that says what the image communicates in context, not what it looks like pixel by pixel.

<!-- Product image -->
<img src="boot.jpg" alt="Waterproof leather hiking boot, brown, side view">

<!-- Decorative flourish: empty alt, not missing alt -->
<img src="divider.svg" alt="">

<!-- Linked logo: describe the destination -->
<a href="/"><img src="logo.svg" alt="Harbor & Pine home"></a>

<!-- Icon-only button using an inline SVG -->
<button type="submit" aria-label="Search">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

On Shopify, WooCommerce, Wix and Squarespace there is an alt text field for every product and media image; fill it in there rather than editing theme code. Keep it short, usually under about 125 characters, and do not start with "image of".

Frequently asked questions

Is an empty alt attribute a failure?

No. alt="" is the correct way to mark a decorative image. A missing alt attribute is the failure, because the screen reader then falls back to reading the file name.

Can AI-generated alt text fix this?

It can give you a first draft, but it often describes the wrong thing ("a person standing") instead of what matters to a shopper (the product, color, and variant). Review it, especially for products, buttons and links.

Do background images in CSS need alt text?

Only if they carry information. If a CSS background image contains meaningful content, such as text in a banner, provide that content as real text on the page or as visually hidden text.

Automated rules that test this (axe-core): image-alt, input-image-alt, role-img-alt, svg-img-alt, area-alt, object-alt. Our scanner runs these checks.

Other commonly cited criteria

Read the official WCAG 2.1 specification at W3C.

Proof of Access provides technical accessibility assessments. We are not a law firm and nothing on this page is legal advice. If you have received a demand letter or a lawsuit, talk to an attorney.