Graphs and Charts accessibility
Provide a text summary of the visualization, making sure to describe trends or patterns in the visualization.
Providing a text summary serves multiple purposes. First, it will provide an alternate format for consuming the data for users that find the visualization confusing or distracting.
Secondly, it will provide non-visual users with a description of trends and patterns that can otherwise be difficult to determine. It provides a basic fallback for users in case the rest of the visualization is inaccessible.
In addition, a text description is often easily picked up by search engines, which aids in getting higher search rankings for the content.
Make the data available in an accessible table format.
Making the data available in an accessible table format serves similar purposes as the text summary. For a non-visual user, it can be a familiar way to navigate a dataset, and even some visual users can find a data table to be an easier format to understand.
Some search engines can use data table content to present a featured snippet in search results, leading to a high search ranking.
If you can also make the visualization graphic itself accessible, that is even better.
Ensure sufficient contrast and separation between elements in the visualization.
The W3C WCAG 2.1 guidelines recommend a 3:1 contrast ratio for large and non-text elements. The smaller text should have a 4.5:1 contrast ratio against its background.
Do not rely on color alone to convey information, and ensure colors used can be distinguished by people with various forms of color blindness.
Data labels, symbols, annotations, and tooltips are common ways to convey additional information in visualizations without relying on color. In addition, alternate presentations – such as an accessible data table – can be helpful. It is still encouraged to use color as a supplement to these techniques; this can make visualizations easier to understand and in many cases more accessible.
Ensure text is readable.
Small text is generally harder to read, and should be avoided where possible. Consider using common abbreviations to allow for larger text. Make sure the text is not obstructed by other chart elements, and has sufficient contrast against its background.
Prefer simple and understandable language.
By simple language we refer to language that aims to be as clear and plain as possible, avoids verbose, convoluted language, and minimizes use of jargon.
Prefer simple, familiar visualizations over complex novelties.
For users with certain cognitive impairments, complex visualizations can be particularly challenging. If using a complex or novel visualization, make sure that it is accompanied by a text description, to ensure that users understand what the visualization is meant to convey, and how to interpret it.
Make interactive visualizations keyboard-accessible.
Keyboard accessibility is an obvious requirement for interactive data visualizations. While many users with motor impairments will be using assistive technology other than keyboards, these tools often emulate keyboard behavior. This means that interactions accessible to keyboard-only users in reality are accessible to a wide range of users with different needs.
If using animations or movement in the visualization that can be distracting, allow the user to turn this off, and respect the “prefers-reduced-motion” CSS media feature when relevant.
Some users, for example users with vestibular disorders, can experience nausea or distraction from animated content. Users with some cognitive impairments can also be distracted or confused by movement.
Ensure the visualization is responsive to different screen sizes and zoom levels.
Responsiveness in modern web design is crucial, both given the increased variety of screen formats used today, but also for accessibility. Low vision users in particular will often browse with an increased text size, use custom stylesheets, or make use of browser zoom as they navigate the web. This means that content needs to reflow to avoid horizontal scrolling, clipping, or overlapping of elements.