Learning Series on Disability-Inclusive Election Technology

Choosing Accessible Data Visualizations

The most common mistake in generating accessible static or interactive data visualizations is not considering accessibility early enough in the process.

To plan for accessible visualizations of both static and interactive data, choose the type of chart or graph that best conveys the message you want to convey based on the data. For example, is the goal to show how voter turnout fluctuated over time across multiple elections? A line chart can trace that pattern. Is the goal to show what percentage of the total number of registered voters turned out to vote in each year? Pie or doughnut charts offer simple representations of the whole. Is it useful to quickly compare the demographics of the entire electorate? Bar charts – simple, clustered, or stacked – can visualize that information best. A test for choosing the most appropriate chart type is to consider how to express the information presented in the chart or graph in words. This exercise will also be useful when considering how to add alternative (alt) text, as discussed below.

Planning for accessible interactive data visualizations needs to start early. When choosing the platform to use, review the accessibility features of interactive data visualization tools, which should be available on their main forums. Some features to look for are screen reader capability, alt text options, and audio overlay. Platforms like Google Looker Studio, PowerBI, and Tableau have different accessibility options and limitations; these and other platforms introduce more features every day. It is best practice to review the options often to see what has changed.
 

Data visualization design choices made with accessibility in mind tend to make information easier for all users to understand. Below are tips for incorporating some of the most common accessibility features into data visualizations.

• Use alt text. Alt text is a pre-programmed description of a chart, graph, or image that screen readers can read and present to users who are unable to see the visual format. Good alt text descriptions are concise but specific. They should explain the action or trend being visualized. Fortunately, this accessibility feature can usually be added to existing visualizations.

For example, alt text for the chart above could read:

“A line chart showing voter turnout by two age groups over four elections. The x-axis displays years in five-year increments from 2000 to 2015. The y-axis displays voter turnout in increments of 10 percentage points from zero percent to 90 percent. There are two lines on the graph. The orange line represents the turnout of voters ages 30 and older, and the blue line represents voters ages 18 to 29. Turnout among both groups increased from one election to the next from 2000 until 2015, when voter turnout among voters ages 18 to 29 decreased from the previous election in 2010. Since 2000, voters aged 30 and older have consistently voted at higher rates than voters ages 18 to 29.”

Be intentional about layout.

•  Plan a logical order for screen readers. The sequence in which a screen reader presents the text and charts must match the standard reading order for visual users. Interactive platforms enable designers to adjust the order in which they add components (and screen readers read them. It is also possible to build in skip logic that users can control with their keyboards.
• Make sure any static charts use text (not images of text) that assistive technologies can read. In addition to the alt text used with graphics, a screen reader will read the text used for labels, headings, and any other content. Pictures of text, including screenshots, are not readable.
• Include page and section headings, chart and table titles, and labels. Chart titles should explain the main trend or central point presented in the visual to guide comprehension for both visual and non- visual users.
• Maintain clarity for every kind of user. Avoid using acronyms in chart names or labels when possible, as it can be difficult for screen readers to express them accurately. Even if acronyms are well-known to the intended audience, it is best practice to define them the first time they will be read. Again, consider the order in which assistive technology will read this information.  

Use high-contrast colors and patterns or gradients when possible.

• In charts with multiple colors, make sure elements of the visualization contrast highly with both the background color and the other colors in the chart. Most data visualization platforms have established color schemes for people with color blindness that you can also use.
• Integrating patterns or gradients is another way to differentiate more easily among the elements of a chart or graph. Examples include patterned fills on bar charts or sections of a pie chart or using different shapes for the markers on each line of a line chart. The use of patterns improves the experience for all users, enabling them to more quickly skim and glean insights from the visuals.

• Provide information in multiple formats. Most charts are based on tabular data or lists. When generating interactive online data visualizations, adjust settings to enable users to view data as tables or lists as well as charts. In static visuals, data can be presented in tables in an annex. Some information might always be best presented as a table. Test several visual options (ideally with users with visual disabilities) to confirm how the information and meaning are best conveyed.
• Test online data visualizations for web content accessibility compliance. If you plan to visualize data online, become familiar with the standard accessibility measures outlined in the Web Content Accessibility Guidelines (WCAG). Several online compliance checkers will review a site for compliance WCAG standards; one is listed in the Additional Resources section below. Some will also suggest revisions to align a site with national and international standards.

Resources                      
AccessibilityChecker.org  accessibility  online  compliance  checker. Cesal, A. (2020).
Writing Alt Text for Data Visualization. Nightingale, July 23, 2020.
Harvard University IT: Digital Accessibility Services. Data Visualizations, Charts, and Graphs
Harvard University IT: Digital Accessibility Services. Information for Content Creators
Nightingale: Journal of the Data Visualization Society. Visual Accessibility Resources. Nightingale. (April 10, 2023)
WebAIM, Web Accessibility for Designers. Webaim.org.