Making Non-Text Content Accessible

Shawn Sandy (Ally.Cafe) ~ May 12, 2024

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 and aria-label for labels.
Ensure Decorative Images are Ignored:
- Use empty alt attributes for decorative images to ensure screen readers ignore them.
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:

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

Edit on Github Open an issue