Accessible Charts and Graphs: What to Include and Why
Today’s post explores accessible charts and graphs and covers:
- What makes a chart or graph accessible
- The WCAG requirements that apply
- Common accessibility mistakes; and
- A practical six-step workflow and checklist you can use with any chart or graph.
Video Guide
Every chart communicates a message
Charts and graphs communicate some of the most meaningful information in reports, dashboards, presentations, and PDFs. They help people understand trends, comparisons, relationships, and proportions quickly.
They also represent one of the most common sources of accessibility failures during audits.
Why accessible charts matter
Accessibility directly affects how people understand and use information.
Consider a quarterly financial report with a line chart showing revenue and expenses. If the chart distinguishes the two lines only by different shades of green, many people with color vision deficiencies cannot tell them apart. They lose access to information that supports important business decisions.
Now consider a screen reader user encountering the same chart. If the only available description says “bar chart,” the user receives none of the data or insights the chart was designed to communicate.
In both situations, the chart fails to deliver its purpose.
Your accessibility work should make these messages available to every user. Treat every chart as informative. If it appears in a document, it carries meaning and needs an accessible equivalent.
Accessibility requirements
Accessibility requirements apply wherever digital content lives. Several regulations reference WCAG as the accessibility standard.
- ADA Title II (updated in 2024) requires WCAG 2.1 Level AA for public entities.
- Section 508 requires WCAG 2.0 Level AA for U.S. federal agencies.
- Section 504 requires WCAG 2.1 Level AA for organizations receiving funding from the U.S. Department of Health and Human Services.
- Colorado House Bill 21-1110 requires state and local government entities to make digital services, documents, and other online information accessible.
Five WCAG success criteria to know
These WCAG success criteria appear repeatedly when evaluating charts and graphs:
- WCAG 1.1.1 Non-text Content: Provide a meaningful text alternative that explains what the chart shows and communicates the main takeaway.
- WCAG 1.3.1 Info and Relationships: Include an accessible data table or equivalent representation so users can access the underlying values.
- WCAG 1.4.1 Use of Color: Do not rely on color alone to distinguish data series, categories, or key information.
- WCAG 1.4.3 Contrast (Minimum): Ensure that chart text, including titles, legends, axis labels, tick marks, and data labels, remains readable.
- WCAG 1.4.11 Non-text Contrast: Make graphical elements such as bars, lines, data points, borders, and trend lines visually distinguishable from the background.
Common accessibility mistakes
Accessibility audits often uncover the same chart issues: generic alt text, color-only data distinctions, low-contrast labels, visuals that rely on color without labels or patterns, and missing data tables.
Alt text should communicate the chart’s main takeaway, while a data table should provide the complete values for users who need precise information.
Accessible charts and graphs in six steps
Use this workflow to review and improve almost any chart or graph:
- Identify the message: State what the chart is meant to communicate before making changes.
- Write meaningful alt text: Use one sentence to name the chart and summarize its main takeaway.
- Provide accessible data: Include a data table or detailed text description with the complete values.
- Improve color accessibility: Use a colorblind-safe palette and add cues such as labels, patterns, or distinct line styles.
- Improve contrast: Make sure text and visual elements stand out clearly from the background.
- Test the chart: Check the chart with a screen reader, grayscale view, contrast checker, and manual review before publishing.
Final checklist
Before publishing a chart, confirm that you can answer yes to these questions:
- Does the chart communicate a clear message?
- Does the alt text describe the chart and its main takeaway?
- Can users access the underlying data through an accessible table or equivalent text?
- Can someone understand the chart without relying on color?
- Do text and graphical elements have sufficient contrast?
- Have you tested the chart with assistive technologies and accessibility tools?
Understanding what makes a chart or graph accessible, and then following the workflow and checklist will help you catch common issues before they become barriers for your audience.
Let me be your champion for inclusion. I offer tailored solutions (and self-paced courses!) to ensure your documents meet and exceed compliance expectations. For more detailed insights, tutorials, and in-depth discussions on accessibility and related topics, don’t forget to check out my YouTube channel: The Accessibility Guy on YouTube. Subscribe for regular updates!
Responses