WCAG 2.2 Guideline 1.1.1 Non-text Content: A Beginner’s Guide with Practical Examples

What is Non-text Content (1.1.1)?

WCAG (Web Content Accessibility Guidelines) 2.2 guideline 1.1.1 “Non-text Content” addresses the requirement to make non-text content (such as images, videos, and audio) understandable to all users, even those who rely on non-visual or non-hearing senses.

For example, while images or icons may appear on a webpage, users who are visually impaired or using text-only browsers will not be able to see them. This guideline ensures that alternative information (such as alt text) is provided, so that all users can receive the same content.

Basic Rules

The following points must be followed:

1. Provide alternative text for non-text content

   • Example: Images, diagrams, buttons, etc., should have text that describes their content.

2. Properly handle decorative or meaningless content

   • Example: Decorative images should be set to not be read by screen readers.

3. Provide captions or descriptions for audio and video content

   • Example: Transcribe audio content, and provide subtitles for videos.

Explanation with Practical Examples

To make it easy for beginners to understand, let’s go over practical examples.

1. Alternative Text for Images (alt attribute)

Correct Example:

For a product page with an image of a t-shirt:

<img src="tshirt.jpg" alt="Red cotton t-shirt, size M">

• Why is it necessary?
  Users with visual impairments can hear this alternative text through screen readers to understand the content of the image.

Decorative Images:

For images used as design elements (such as a background), set the alt attribute to empty:

<img src="decorative-line.jpg" alt="">

• Why is it necessary?
  This prevents screen readers from reading out unnecessary information.

2. Icon Descriptions

Icons used for buttons or links need alternative text.

Correct Example:

<a href="/home">
  <img src="home-icon.png" alt="Home">
</a>

• Why is it necessary?
  Icons alone may not convey their meaning, so alternative text explains their function.

Common Mistake:

Missing alternative text:

<a href="/home">
  <img src="home-icon.png">
</a>

In this case, screen readers will only announce “link,” making it unclear where the link leads.

3. Transcribing Audio Content

When providing audio files or podcasts, offer a transcription (text script).

Correct Example:

Display the transcription below the audio file:

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  This browser does not support the audio element.
</audio>
<p>Transcript: In this episode, we discuss the basics of web accessibility.</p>

• Why is it necessary?
  Users with hearing impairments can understand the content through text.

4. Adding Subtitles and Descriptions for Video Content

For videos, add subtitles or audio descriptions that convey the content.

Correct Example:

Add subtitles to the video player:

<video controls>
  <source src="example-video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="ja" label="Japanese Subtitles">
</video>

• Why is it necessary?
  Users with hearing impairments can read subtitles to understand the video content.

5. Describing Charts and Form Error Messages

For Charts and Graphs:

Provide alternative information for charts.

Correct Example:

<img src="sales-chart.png" alt="2024 sales data. 20% increase from January to March.">

• Why is it necessary?
  Converts visual information into accessible text for users who cannot see the graph.

Form Error:

Ensure that error messages are not only visually communicated.

<label for="email">Email Address</label>
<input type="email" id="email" required>
<span id="error" aria-live="polite">Please enter a valid email address.</span>

• Why is it necessary?
  Ensures that users with visual impairments also receive the error message.

Key Points for Beginners to Note

1. Provide alternative information for all non-text content:
   Always provide alt attributes for images and captions for videos.

2. Test with screen readers:
   Use actual screen reader tools to ensure that alternative text functions correctly.

3. Consider user experience:
   Make sure that users with visual or hearing impairments can easily access information.

By implementing these practices, you can create web content that is accessible to everyone.

We have released UUU Web Accessibility for easy integration into your website. If you’re interested in improving accessibility, please check out the details.