Making Non-Text Content Accessible
Shawn Sandy (Ally.Cafe) ~
Introduction
Non-text content, such as images, audio, and video, plays a crucial role in enhancing the user experience on the web. However, for users with disabilities, such content can present significant barriers if not properly made accessible. The Web Content Accessibility Guidelines (WCAG) provide clear guidelines to ensure that non-text content is accessible to everyone. This article will explain the relevant WCAG guidelines and success criteria for non-text content and provide practical examples and best practices for implementation.
WCAG Guidelines for Non-Text Content
1. Text Alternatives (Guideline 1.1)
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols, or simpler language.
- 1.1.1 Non-text Content (Level A):
- Requirement: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
- Purpose: This ensures that users who cannot see or hear the non-text content can understand its purpose through text descriptions.
- Example: Adding
alt
attributes to images, providing transcripts for audio content, and captions for videos.
Example 1: Images
Images should always have an alt
attribute that describes their content.
<img src="mountains.jpg" alt="A scenic view of mountains during sunset" />
Example 2: Decorative Images
Decorative images, which do not add meaningful content, should have an empty
alt
attribute.
<img src="decorative-border.png" alt="" />
Example 3: Complex Images
For complex images like graphs or diagrams, provide a longer description using
aria-describedby
or a link to a detailed description.
<img
src="sales-chart.png"
alt="Sales chart for Q1 2024"
aria-describedby="chart-description"
/>
<p id="chart-description">
This chart shows a significant increase in sales during the first quarter of
2024...
</p>
Example 4: Audio Content
Provide a transcript for audio content.
<audio controls>
<source src="podcast.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<p>Transcript: Welcome to our podcast. Today, we will discuss...</p>
Example 5: Video Content
Provide captions and transcripts for video content.
<video controls>
<source src="video.mp4" type="video/mp4" />
<track src="captions_en.vtt" kind="captions" srclang="en" label="English" />
Your browser does not support the video tag.
</video>
<p>Transcript: This video explains the features of our new product...</p>
Best Practices for Non-Text Content
-
Use Descriptive Alt Text for Images:
- Ensure that alt text is meaningful and describes the content and function of the image.
- Avoid using phrases like “image of” or “picture of.”
-
Provide Transcripts and Captions:
- For all audio and video content, provide accurate and synchronized captions and transcripts.
- Ensure that captions are readable and appear at a consistent pace.
-
Use ARIA for Complex Content:
- Use ARIA (Accessible Rich Internet Applications) attributes to provide additional context and information for complex non-text content.
- Examples include
aria-describedby
for detailed descriptions andaria-label
for labels.
-
Ensure Decorative Images are Ignored:
- Use empty
alt
attributes for decorative images to ensure screen readers ignore them.
- Use empty
-
Test with Assistive Technologies:
- Regularly test your content with screen readers and other assistive technologies to ensure that non-text content is accessible.
Relevant Resources
Here are some valuable online resources to learn more about making non-text content accessible:
-
Web Content Accessibility Guidelines (WCAG) Overview
-
W3C Web Accessibility Initiative (WAI) - A comprehensive resource on web accessibility provided by W3C.
-
WebAIM: Alternative Text - Guidelines and techniques for writing effective alt text.
-
W3C ARIA Overview - Information on using ARIA to enhance accessibility.
-
Understanding Non-text Content (WCAG 2.2)
-
Web Accessibility Tutorials: Text Alternatives
By following these guidelines and best practices, you can ensure that your non-text content is accessible to all users, providing an inclusive and enriching experience for everyone.
Found an error, typo, or bug please edit on github or open an issue or ticket