Skip to main content

Text Alternatives in Web Accessibility

Provide text alternatives for any non-text content so that it can be changed into other forms people need.

Text Alternatives in Web Accessibility

A11y.Cafe ~

Introduction

Text alternatives are a fundamental aspect of web accessibility, ensuring that non-text content is accessible to all users, including those with disabilities. The Web Content Accessibility Guidelines (WCAG) emphasize the importance of providing text alternatives for non-text content to ensure an inclusive user experience. This article will explain the relevant WCAG guidelines and success criteria related to text alternatives, and provide practical examples and best practices for implementation.

WCAG Guidelines for Text Alternatives

1.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 must have a text alternative that serves the equivalent purpose.
  • Purpose: Ensures that users who cannot see or hear the non-text content can understand its purpose through text descriptions.

Examples of Text Alternatives

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 Implementing Text Alternatives

  1. 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.”

  2. 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.

  3. 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.

  4. Ensure Decorative Images are Ignored:

    • Use empty alt attributes for decorative images to ensure screen readers ignore them.

  5. Test with Assistive Technologies:

    • Regularly test your content with screen readers and other assistive technologies to ensure that text alternatives are effective and useful.

Relevant Resources

Here are some valuable online resources to learn more about text alternatives and accessibility:

These resources will open in a new window for your convenience.

By following these guidelines and best practices, you can ensure that your web 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