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.