WCAG 1.1.1 Non-text Content

[wcgadmfrm]

Understanding WCAG 1.1.1: Non-text Content (Alt Text)

Hi everyone, and welcome to our first deep dive into the WCAG!

Today we're starting with a fundamental criterion that often raises questions: WCAG 1.1.1 Non-text Content, primarily concerning text alternatives for images (the famous "alt text").

What is WCAG Success Criterion 1.1.1?

This Level A criterion states that:
"All non-text content that is presented to the user has a text alternative that serves an equivalent purpose, except for the situations listed below."

In simple terms, it means that every image, icon, or other non-textual element on your website must have a textual description that conveys its meaning or function, so that anyone who cannot see it (e.g., screen reader users) or cannot load it (e.g., broken images) can still understand the content.

Why is it So Important?

A well-crafted alt text is crucial for:

• Screen Reader Users: Allows them to understand images they cannot see.
• SEO: Helps search engines understand the content of your images.
• Unloaded Images: If an image fails to load, the alt text is displayed in its place.
• Users with Low Bandwidth: Helps them grasp content without loading the full image.

How to Implement Alt Text Correctly? Best Practices & Examples:

The key is to provide an alternative that serves an equivalent purpose.

1. Informative Images (conveying information): Briefly describe the visual content.

Code: Select all

<img src="dog.jpg" alt="A golden retriever playing in the park.">

2. Decorative Images (adding no information, only aesthetics): Use an empty alt attribute.

Code: Select all

<img src="background.png" alt="">

3. Functional Images (clickable icons, buttons): Describe the action the image performs.

Code: Select all

<img src="search.png" alt="Search">

4. Images of Text (avoid if possible): If unavoidable, the alt text should contain the exact text from the image.

Code: Select all

<img src="discount.png" alt="20% off all items">

Common Mistakes to Avoid:

• Keyword stuffing (excessively repeating keywords).
• Alt texts that are too long or too short.
• Forgetting the alt text entirely.
• Using "image of..." or "photo of...".

Let's Discuss:

What are your biggest challenges when applying Criterion 1.1.1? Do you have examples of particularly effective alt texts or common mistakes you've encountered? Share your experience!

Warm regards,

Michele (wcgadmfrm)
WCAG Plus Forum Team