Loading...
Loading content...
Loading content...
Provide text alternatives for all images, icons, and other non-text content so screen readers can convey the information.
Why it matters: Screen reader users cannot access information presented only in images, videos, or audio without text alternatives.
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
What This Means: This success criterion requires that all non-text content (images, icons, charts, graphs, audio, video, etc.) must have a text alternative that conveys the same information or serves the same purpose as the non-text content. This ensures that users who cannot see or hear the content can still access the information through assistive technologies like screen readers.
Why It's Important: Without text alternatives, users who are blind, have low vision, or use screen readers cannot access information that is only presented visually. Similarly, users who are deaf or hard of hearing cannot access information presented only in audio. Text alternatives make content accessible across different sensory modalities.
For images, this typically means using the alt attribute in HTML. Informative images need descriptive alt text, decorative images should have empty alt attributes, and functional images (like buttons) need alt text that describes their function. Complex images may need longer descriptions provided through aria-describedby or nearby text. Audio content needs transcripts, and video content needs captions and audio descriptions.
This criterion ensures that blind users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with low vision can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with cognitive disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Screen readers will announce this as "image" or read the filename, providing no context.
<img src="chart.png" />The alt text describes the content and function of the image.
<img src="chart.png" alt="Bar chart showing 20% increase in sales for Q3" />Decorative images should have an empty alt attribute so screen readers ignore them.
<img src="divider.png" alt="" />This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.1.1 Non-text Content are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
Try this interactive example to see how this success criterion works in practice:
Interactive example for image alt text will be implemented here.
All images need alt text, so I'll just use 'image' or 'photo' for everything.
Generic alt text like 'image' provides no value. Alt text should be specific and descriptive, or empty for decorative images. Screen readers already announce 'image', so adding 'image' to alt text is redundant.
I can skip alt text if I provide a caption below the image.
Captions are visible to all users but don't replace alt text. Screen readers need the alt attribute to announce images. Use both: descriptive alt text AND captions for complex images.
Decorative images should have descriptive alt text too.
Decorative images that don't convey information should have empty alt attributes (alt='') so screen readers skip them. Adding descriptive text to decorative images creates unnecessary noise.
Alt text should describe every detail in the image.
Alt text should be concise (typically under 150 characters) and focus on the image's purpose in context. Save detailed descriptions for complex images using aria-describedby or longdesc.
Missing alt attribute entirely on informative images.
Add descriptive alt text that conveys the image's purpose and content. Example: alt='Bar chart showing sales increased 20% in Q3'.
Using filename as alt text (e.g., alt='IMG_1234.jpg').
Replace with meaningful description. Filenames provide no value to users. Example: alt='Product photo: Blue wireless headphones'.
Using generic alt text like 'image', 'photo', or 'picture'.
Use specific, descriptive text or empty alt for decorative images. Screen readers already announce 'image', so generic text is redundant.
Leaving decorative images without empty alt attributes.
Add alt='' and optionally role='presentation' to decorative images so screen readers skip them.
Describing appearance instead of function for functional images (buttons, links).
Describe what happens when activated, not what it looks like. Example: alt='Print this page' not alt='Printer icon'.
Starting alt text with 'image of' or 'picture of'.
Screen readers already announce 'image', so start directly with the description. Use 'Bar chart showing...' not 'Image of a bar chart showing...'.
Using the same alt text for multiple images that serve different purposes.
Each image needs unique alt text that reflects its specific purpose and context on the page.
Note: These are official W3C resources for 1.1.1. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.1.1 Non-text Content correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.1 Text Alternatives