Accessibility and Assistive Technology

Best Practices for Creating Accessible Charts

Updated on

There are steps that need to be taken to make charts accessible to people who are blind and people with visual impairments. Text, color, shapes, and ways of interaction with visualizations need to be made accessible in every chart.

Title

Your title should be short and concise with describing the main idea of the chart.

Alternative Text for Visuals

Alternative (or "alt") text allow people using a screen reader to understand the information displayed on an image, chart, or any non-text element.

Alt text for data visualization should contain four elements: 

  • chart type 
  • data that is presented 
  • the main conclusion
  • the link to the full dataset

Besides an alt text, it’s a good practice to have a summary or an explanation of the visualization, which can be complex.

The chart type, data, and main conclusion give a great overview of the chart that will be enough for most users. The link to the data source provides an additional opportunity to dive deeper into the data the chart was based on.

Direct Labeling

It is best practice to use labels on chart elements like lines and bars. A direct label that is linked with the corresponding element also provides additional info that can be transformed by screen readers that are used by people with low vision and vision impairment. For colorblind users, direct labels provide a possibility to read the chart even if the coloring wasn’t perfect.

Text

It is recommended to use 12pt (16px) size fonts for body text.

Typefaces that are used in the chart also impact accessibility. It can make a difference for people with poor vision, learning disabilities, aphasia, dyslexia, or low adult literacy.

  • Sans serif fonts are best for legibility.
  • Avoid serif, cursive, or any stylized fonts that may be difficult to see.

Color

When making text and chart elements accessible, it is important to remember that only brightness is visible to all users. For example, red text on a green background may disappear entirely for people who are color blind, have low vision, or are viewing the chart in grayscale.

There are several color contrast checkers out there that can help you to follow the guidelines: WebAIM, A11y, ColorContrast, and many more. 

You should always perform a manual check and test it with users.

Previous Article Accessible Chemistry Chart Resource
Next Article Flashing Content
Still Need Help? Contact Us