Category: Text Alternative 1.1.1

So far, we’ve talked about simple images needing concise alt text and complex images requiring robust long descriptions to meet WCAG Success Criterion 1.1.1. But what about images that don’t convey any meaningful information at all? What about those purely decorative images?

This is where things can get a little tricky. While WCAG 1.1.1 demands a text alternative for non-text content, it also acknowledges that some images are purely for visual flair and would clutter the experience for users who don’t rely on sight.

What is a Decorative Image?

A decorative image is an image whose sole purpose is aesthetic enhancement. It doesn’t convey any information that isn’t already available in the surrounding text, or it’s purely for visual appeal without adding any contextual meaning. Examples include:

Borders, spacers, or purely aesthetic background images.
Icons that are purely visual complements to text (e.g., a small leaf icon next to “Our Green Initiatives” where the text itself is sufficient).
Images that are part of a visual design but don’t add meaning (e.g., a swirling abstract pattern).
Stock photos that serve as visual “filler” but don’t add specific information to the adjacent content.
The Golden Rule for Decorative Images: An Empty alt Attribute

For decorative images, the correct way to comply with WCAG 1.1.1 is to provide an empty alt attribute: alt=””.

Why an empty alt attribute?

Screen Reader Behavior: When a screen reader encounters an tag with alt=””, it understands that the image is purely decorative and will skip over it entirely. This prevents unnecessary announcements that would interrupt the user’s flow and add cognitive load.
Accessibility Tree: An empty alt attribute effectively removes the image from the accessibility tree, ensuring it’s not announced to assistive technologies.
WCAG Compliance: This is the officially recommended technique for decorative images under WCAG 1.1.1.
Examples of Correct Usage for Decorative Images:

Our Green Initiatives (where “Our Green Initiatives” is the primary information)
Important Considerations and Common Mistakes:

Don’t Omit the alt Attribute Entirely: While an empty alt attribute is good, completely omitting the alt attribute is bad practice! If the alt attribute is missing, some screen readers might announce the image filename, which is unhelpful and confusing. Always include alt=”” for decorative images.

CSS Background Images for Pure Decoration: For truly purely decorative images that are not content-bearing, consider using CSS background-image property instead of an tag. Images included via CSS are inherently ignored by screen readers and don’t require an alt attribute.

Example: Use this when the image is purely presentational and adds no semantic value to the content.
Be Absolutely Sure it’s Decorative: This is the most crucial part! What you think is decorative might actually be informative for someone else.

Think critically: If removing the image would make the content less understandable or would take away meaningful information, then it’s NOT decorative, and it needs proper alt text (or a long description).
Example: An icon next to a link might seem decorative, but if it helps users quickly identify the link’s purpose (e.g., a printer icon next to “Print Page”), then it’s informative and needs appropriate alt text.
Why Get This Right?

Gracefully handling decorative images through alt=”” or CSS background images is vital for:

Improved User Experience: Prevents screen reader users from hearing unnecessary and potentially confusing announcements, allowing them to focus on meaningful content.
Efficiency: Makes navigating your website faster and less frustrating for assistive technology users.
True Accessibility: Demonstrates a nuanced understanding of accessibility principles, ensuring that your website is genuinely usable for everyone.
By mastering the art of distinguishing between simple, complex, and decorative images, and applying the appropriate WCAG 1.1.1 techniques, you’re well on your way to creating a more inclusive and user-friendly web for all!

In our last post, we explored the straightforward world of simple images and the power of the alt attribute. But what happens when an image isn’t so simple? What about charts, graphs, diagrams, or intricate infographics that convey a wealth of data or complex relationships? This is where WCAG Success Criterion 1.1.1 takes on a new level of importance, focusing on complex images.

Defining a Complex Image

A complex image is one that cannot be adequately described with a short alt attribute. It contains significant information or represents relationships that require more than a sentence or two to convey meaningfully to someone who cannot see it. Examples include:

Graphs and Charts: Bar graphs, pie charts, line graphs showing trends.
Diagrams: Flowcharts, architectural diagrams, scientific illustrations.
Infographics: Visual representations of data and information designed for quick understanding, but often packed with detail.
Maps: Especially those that convey specific routes, geographical features, or data overlays.
The Challenge of Complexity: Beyond the alt Attribute

For complex images, simply providing alt text like “A bar chart” or “A diagram of a process” is insufficient and fails to meet WCAG 1.1.1. Users relying on screen readers would gain almost no understanding of the valuable information presented visually.

Strategies for Accessible Complex Images

Since the alt attribute isn’t enough, we need to employ additional techniques to provide a comprehensive text alternative. Here are the most common and effective approaches:

Long Description (Referencing a Nearby Text):
This is often the preferred method. The alt attribute provides a brief, concise overview of the image, and a more detailed description is provided in the surrounding text on the page.

Example: Then, immediately after the image in the content: “The bar chart above illustrates significant growth in Q3 2024, with sales reaching $X million, a Y% increase from Q2…”
Long Description (Linked to a Separate Page):
If the description is exceptionally long or contains a lot of data, you can link to a separate page or section containing the full text alternative.

Example:

For a detailed explanation of the water cycle diagram, click here. (Note: aria-describedby is a powerful ARIA attribute that creates an association between an element and a description, improving screen reader experience.)
Long Description (Using details/summary element):
This HTML5 element allows you to provide a collapsable section of content directly on the page, perfect for detailed descriptions.

Example: Detailed description of market share pie chart

The pie chart illustrates the 2023 market share distribution across four key competitors. Company A holds 45% of the market, followed by Company B at 30%, Company C at 15%, and Company D at 10%.
Key Considerations for Long Descriptions:

Completeness: The description must convey all the information and relationships presented visually in the image. Imagine explaining it over the phone to someone who cannot see it.
Structure: Use headings, lists, and paragraphs to make the description easy to read and understand.
Data Tables: If the image is a graph or chart, consider providing the underlying data in an accessible HTML table. This is often the most effective way to convey numerical information.
Why the Extra Effort?

Ensuring complex images are fully accessible is critical for:

Inclusivity: It allows everyone, regardless of their visual abilities, to access and understand crucial data and information.
Information Equity: Prevents users from being excluded from understanding key insights presented visually.
Compliance: Meeting WCAG 1.1.1 for complex images is a fundamental requirement for many accessibility standards.
While it requires more thought and effort, providing comprehensive text alternatives for complex images is a hallmark of truly accessible web design. It’s about empowering all users to grasp the full meaning of your content.

Next up, we’ll tackle the often-misunderstood world of decorative images!