WCAG 1.1.1

Summary

WCAG 1.1.1 requires that all non-text content (such as images, graphics, buttons or multimedia) offer an equivalent text alternative. This ensures that content is accessible to users who use tools such as screen readers or who require text alternatives for other reasons.

Level: A
Category: Perceivable

What is WCAG 1.1.1 - Non-textual content?

Non-textual content refers to any element on a web page that is not readable text, such as images, icons, graphics, audio clips, videos, buttons or interactive elements without text labels.

This guideline guarantees that information is not lost for users with a visual impairment or cognitive impairment or for people who use assistive technologies. Text alternatives (such as alt texts) enable screen readers to convey the information in an understandable way.

Who benefits from this?

People with a visual impairment who use screen readers.
People with cognitive disabilities who need clarification of visual information.
Users with slow or limited internet connections where images may not load.
Users who browse and interact with the page via voice control.

How do you comply with WCAG 1.1.1?

Always provide meaningful text alternatives for non-textual elements.

Use of alt attributes for informative images: html <img src=‘dog.jpg’ alt=‘A brown dog playing in the grass’> A clear alt text describes exactly what the image shows.

Use of aria-labels for interactive icons without visible text:

<button aria-label=‘Open menu’>
  <svg><!-- pictogram --></svg>
</button>

The aria-label clarifies the action for users with assistive devices.

Describing complex images (such as graphs) via textual explanation and aria-labelledby:

<img src=‘turnover-graph.png’ aria-labelledby=‘graphDescription’>
<p id=‘graphDescription’>
  This graph shows the development of revenue from 2020 to 2025 with strong growth from 2023 onwards.
</p>
*Users can understand the content of complex images better thanks to the extended description.*

**Use empty alt attributes (alt=‘’) for decorative images so that assistive technologies ignore them:**
```html
<img src=‘decorative-pattern.png’ alt=‘’>

Decorative images are ignored so that they do not cause confusion for users with assistive technology.

Good and bad examples

✅ Good example:

<img src=‘company-logo.png’ alt=‘Logo of Accesseo, an accessibility company’>

Clear description of the image's content.

❌ Bad example (no alt attribute):

<img src=‘company-logo.png’>

No alt attribute; inaccessible to users with assistive technologies.

❌ Bad example (unclear alt text):

<img src=‘company logo.png’ alt=‘logo’>

Insufficient description; says little about the content or context.

How do you test WCAG 1.1.1?

Manual check:

Check whether all informative images, icons, graphs, videos (where relevant) and interactive elements contain a clear text alternative.
Check whether decorative images are explicitly marked with an empty alt attribute (alt=‘’).
Check that complex visual elements (such as graphs and diagrams) have an additional textual description.

Automatic tools:

Use one or both of the following standard tools:

Axe DevTools
Lighthouse (Chrome DevTools)

Use a screen reader:

NVDA (Windows)
VoiceOver (Mac)