Overview
Graphs, charts, and infographics use images to explain complex information to users. But they can create accessibility issues because they can be difficult to understand, often use color for meaning, and screen readers can't decipher the information they display.
Best practices
- Make graphs, charts, and infographics as simple as possible.
- Use direct labels rather than legends.
- Use different styles of graph lines to make graphs easier to understand.
- Include a meaningful title for the graph, chart, or infographic.
- Always provide alt text.
- Check type and color contrast.
- Use white space between sections.
- Don't rely on color to convey meaning.
- Avoid red and green combinations.
Resources
- WebAIM contrast checker
- WCAG Color contrast checker
- Web accessibility tutorials: Complex images
- WCAG 2.1 Understanding success criterion 1.1.1: Non-text content
- WCAG 2.1 Understanding success criterion 1.4.1: Use of color
- WCAG 2.1 Understanding success criterion 1.4.3: Contrast
- WCAG 2.1 Understanding success Criterion 1.4.11: Non-text contrast