2 minute read

Create accessible infographics and charts

How do you explain what’s in a graph to someone who can’t see it?

Infographics and charts simplify complex ideas, but without accessibility, they can exclude people who rely on assistive technologies or have visual, cognitive, or color vision impairments.

Add text summaries and design with clarity for people who can’t view the visuals.

Key elements of accessible infographics and charts

Provide descriptive text equivalents

  • Alt text for simple images: Use clear, descriptive alt text that conveys the main idea (e.g., “Bar chart showing social media user growth from 2010 to 2023”).
  • Long descriptions for complex visuals: For detailed infographics, include a longer text description or a data table for people who rely on text-based information.

Use strong color contrast and visual clarity

  • High contrast: Use colors with strong contrast for readability, verified through tools like the Silktide’s Color Contrast Checker.
  • Avoid color-only indicators: Don’t rely on color alone to convey information; use patterns or labels to differentiate sections in charts and graphs.

Use clear, legible fonts

  • Sans-serif fonts: Opt for clean, sans-serif fonts like Arial, which are easier to read than decorative styles.
  • Readable font size: Ensure text is large enough to be readable on all screen sizes and print versions.

Label data clearly

  • Direct labels on data points: Label data points directly in charts to reduce the need for cross-referencing with a legend, making information easier to follow.
  • Consistent labeling: Keep labels clear and consistent across the visual for easy interpretation.

Provide data tables

  • Accessible data tables: Use proper HTML markup for web-based data tables, ensuring screen readers can navigate effectively.
  • Downloadable data: For larger datasets, include a download link (CSV or Excel) so people can explore data on their own terms.

Simple visuals for clarity

  • Minimalist design: Keep visuals simple with straightforward icons, clear layouts, and minimal text.
  • Logical flow: Organize information logically, with headings and subheadings to guide people through the content.
Previous articleNext article
Back to top