WCAG 1.1.1
Non-text Content
Get the latest insights directly in your mailbox
Don`t worry it`s a monthly newsletter, you can opt-out anytime.
Non-text Content
Don`t worry it`s a monthly newsletter, you can opt-out anytime.
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
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.
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 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.
alt=‘’).Use one or both of the following standard tools: