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!
Leave a Reply