Section 1.1: Non-Text Content
This section of WCAG 2.1 explains how to make non-text content accessible, ensuring that people with disabilities can interact with media, images, and controls just as effectively as others.
Alternative Text for Images
Alternative text, or "alt text," helps screen readers describe an image to visually impaired users. For images that convey meaningful information, the alt text should explain their content or function.
- Example: Below is an accessible image with meaningful alternative text:
Decorative images, on the other hand, can be marked with an empty alt="" and the attribute role="presentation", ensuring they are ignored by assistive tools.
- Example: A decorative pattern used for visual design only would use this markup:
<img src="decorative-pattern.jpg" alt="" role="presentation">
Captions and Descriptions for Multimedia
Captions and descriptions ensure that multimedia content, like videos and audio, is accessible to people who are deaf or visually impaired. Captions should include spoken dialogue and relevant sound effects.
- Example: Below is a video with closed captions, ensuring accessibility for all users: Video with Captions
Descriptive audio can be added to videos, explaining visual elements to users who cannot see them.
- Example: A video showing a presenter moving between slides might use descriptive audio like "The presenter switches to a slide showing a bar chart of annual sales growth."
Descriptive Labels for Interactive Elements
Interactive elements, such as buttons and links, must have clear labels that describe their purpose. This helps assistive technologies and users navigate the interface easily.
- Example: Below is a button with a descriptive label:
Ensure the labels are both visible and assistive-tool-friendly.
Testing Non-Text Content
Regularly test all non-text content with tools like screen readers to ensure accessibility compliance. Proper hierarchy and sequencing in navigation are crucial for accessibility.
- Example: A navigation menu should be tested to confirm that links are announced sequentially and provide clear descriptions.