Guideline 1.1 Text Alternatives (WCAG 2.2)

Headphones resting on an open braille book, symbolizing the synergy of audio and tactile information for accessibility.

Welcome back! Today, we will discuss Guideline 1.1 Text Alternatives and its success criteria of 1.1.1 Non-text Content as per the Web Content Accessibility Guidelines (WCAG) 2.2. This guideline is part of the perceivable principle in web accessibility. It requires all information and user interface components to be presented so all users can perceive them, regardless of how they interact with the content. In other words, whether they see, hear, or feel it, the content must be accessible to all users.

What Are Text Alternatives?

Guideline 1.1 Text Alternatives states that non-text content, such as charts, images, video, and audio, should have text alternatives to make it accessible to people with different needs. The text alternatives can be converted into braille, speech, symbols, or simpler language. This ensures that everyone understands the content regardless of disability or preference.

Success Criteria

I mentioned in the previous blog post that each guideline has success criteria. Guideline 1.1 Text Alternatives has only one success criteria, success criteria 1.1.1. The purpose of this criteria is to ensure that information conveyed by non-text content is accessible to everyone through a text alternative. Text alternatives are an effective way of making information accessible because they can be rendered through any sensory modality, including visual, auditory, or tactile, to match the user’s needs.

Exceptions

While text alternatives must be provided for all non-text content, the approach may vary according to the WCAG in some scenarios.

  1. Controls and Input
    • Provide clear names for interactive elements (e.g., buttons, form fields) to help users understand their function. More on this in success criteria 4.1.2 Name, Role, Value.
  2. Time-Based Media
    • Providing descriptive text for time-based media like videos or audio clips is essential. More information on this will be provided in Guideline 1.2 Time-based Media post.
  3. Tests and Exercises
    • If turning non-text content into text would reveal an answer, describe the content without providing the answer.
  4. Sensory Experiences
    • When describing content meant to deliver a specific sensory experience, such as art or music, ensure that you are conveying its essence.
  5. CAPTCHA
    • Provide text descriptions for CAPTCHAs to explain their purpose of checking if the user is human.
  6. Decorative Content
    • Decorative items should be coded to be ignored by assistive technologies.

Practical Examples

To better understand how to provide text alternatives, let’s examine some coding examples that demonstrate how to apply these principles in web development.

In HTML, the ‘alt’ attribute or alt text can be used to provide text alternatives for images. The description should accurately convey the same information or function as the image.

If you’re unsure when to add an alt text to an image, use the W3C Decision Tree.

Informative Images

Pretend you are reading a blog about vacation spots that allow pets. Each place has an image associated with it. The alt text describes the dog-friendly location in the image below.

A White West Highland Terrier Dog at West Sands Beach.
<img src="dog.png" alt="A White West Highland Terrier Dog at West Sands Beach.">
Complex Images

Charts, diagrams, and graphs are crucial for conveying detailed information. The WCAG requires a two-part approach to ensure accessibility:

  1. Concise Alt Text:
    • This brief alt text serves as a quick introduction, summarizing the essential information about the image for screen readers.
  2. Extended Description:
    • This provides a detailed account of the image content and can be placed next to the image, linked to from the alt text, or represented in an alternative format like a data table.

Below is a bar graph with examples of a concise alt text and an extended description to demonstrate this approach. For more in-depth examples, check out the complex images tutorial.

Horizontal bar chart comparing semester grades between Juniors and Seniors.

Figure with Caption Example:

<figure role="group">
  <img src="chart.png" alt="Horizontal bar chart comparing semester grades between Juniors and Seniors.">
  <figcaption>
    This bar chart indicates semester grade distribution, with Seniors obtaining more A's and B's and Juniors having a higher occurrence of D's and F's.
  </figcaption>
</figure>

Image with Link to In-Depth Description Example:

<img src="chart.png" alt="Horizontal bar chart comparing semester grades between Juniors and Seniors." />
<a href="detailed-chart-description.html">Detailed image description</a>
Decorative Images

For purely decorative elements like dividers, an empty alt text is used to skip them for screen readers, providing a smoother navigation experience.

<img src="divider.png" alt="">
Linked Images

When an image is hyperlinked, the alt text should function as link text, clearly explaining the link’s destination.

Accessible Coding Logo
<a href="www.accessiblecoding.com">
  <img src="logo.png" alt="Accessible Coding Homepage">
</a>
Image Button

The alt text for a button image, such as ‘Search,’ should indicate what happens when the button is clicked, ensuring clarity for assistive technology users.

<form>
  <label class="search-label" for="search">Search about recipes:</label>
  <input id="search" type="text">
  <input for="submit" type="image" src="searchbutton.png" alt="Search">
</form>

Writing Effective Alt Text

  1. Starting with “Image of” is unnecessary since screen readers already recognize the code as an image. The screen reader repeats itself.
  2. Remember, alt text should be concise yet descriptive to be informative.
  3. Avoid sharing personal opinions about the image.
  4. If an image contains important text, include it in the alt text.
  5. Using a screen reader to experience your alt text and gain insights may be helpful.
  6. Automated accessibility tools can verify the presence of alt text but not the quality or relevance of the descriptions. Always conduct these checks with a manual review.

Conclusion

In this article, I’ve discussed the essential components of text alternatives covered in Guideline 1.1: Text Alternatives. In my next post, I’ll continue exploring the ‘Perceivable’ principle and concentrate on Guideline 1.2: Time-based Media. I plan to dive deeper into the various aspects of accessibility and provide practical guidance for your development processes. So, keep an eye out for more updates!

Helpful Links

Tags