Infographics, pie charts, bar charts, line charts or other ways of visually representing data – data visualization in short – are rarely barrier-free. Often barriers arise from inappropriate forms of representation, insufficient data preparation or technical errors during implementation. Some tricks help break down barriers. This requires little or no code.
Advertisement
Oliver Schwamb is a UX designer and frontend developer. Since digital accessibility is of paramount importance in both disciplines, he advises on this topic and has been designing and implementing barrier-free surfaces for SVA Systems Vertriebs Alexander GmbH for several years.
Data visualization in the digital space can only be accessible where people are able to understand the content using different sensory channels and interact with different input devices. But the fact that these aids exist does not make data visualization barrier-free.
Colors contrast as obstacles
Perhaps the most obvious obstacle comes from the choice of colors in data visualization. There are several challenges: Colors need to stand out from the background so that there is a sufficient brightness contrast ratio between the foreground and background – WCAG (Web Content Accessibility Guidelines, the world’s leading standard for accessible digital content) defines a contrast ratio of 3:1. If this is not the case, the data visualization may be difficult or impossible to recognize, as Figure 1 shows. Here the row of “solar modules” is difficult to distinguish from the background.
The brightness contrast in this line chart is very low, making the data difficult to read. The site runs in light or dark mode depending on system settings. Users have no option to change the mode (Figure 1).
(Image: From Screenshot https://www.dashboard-deutschland.de/energie/energie,
But contrasts don’t just have to be substantial between the foreground and background. Specific visualized information such as data points and graphs must also show sufficient contrast with each other. Figure 2 shows an example in which the colors chosen for the graphs are difficult to distinguish from each other. Therefore assigning a graph to a legend element based on color alone is a challenge, even without visual restrictions.
In this line diagram, it is difficult to separate individual lines because of the low spacing between them (Figure 2).
(Image: Screenshot with dark mode system setting https://www.dashboard-deutschland.de/energie/energie,
(Image: Graphicwithheart/Shutterstock.com)
to one The website is really hassle-free And to make it accessible to everyone, you have to take into account a number of possible restrictions on the user side: Are colors and contrast easily recognizable? Are all texts and menus compatible with screen readers? EnterJS Accessibility Day On November 7, you will learn what you should consider when developing an accessible website and what the Accessibility Strengthening Act (BSFG) means for you and your company.
Visualization for people with color vision deficiency
Certain colour combinations are also problematic. For people with colour vision deficiencies – red weakness (protanomaly), green weakness (deuteranomaly), red blindness (protanopia) and green blindness (deuteranopia) are particularly common – the colours of data visualisations can represent obstacles. An example of this can be found in Figure 3: without a detailed legend, it is not possible to conclude the meaning of the red and green colours in the simulation of protanopia (image below). This means that the message of the data visualisation can no longer be captured.
There are several difficulties with this data visualization: the relationship between the title and the data bars is ambiguous, and below, a simulation of red blindness (protanopia) shows that the data cannot be captured meaningfully due to the choice of colors (Figure 3).
(Image: From Screenshot https://2023.stateofjs.com/en-US/libraries,
Data visualizations rarely explain themselves
Figure 3 also shows the importance of meaningful titles or descriptions for data visualization. Even for those who can get all the information at a glance, the connection between the title “Library Experience and Emotion” and the data bar shown is not clear. The title does not indicate in detail what the data bar should show, and there is no description of it either.
Anyone who uses a screen reader may find it difficult to understand the message of a data visualization if the necessary information is only available in context. This refers to information that is listed before or after the data visualization or is “hidden” behind an interaction. An example of information hidden behind an interaction is shown in Figure 4. The specific values of the line diagram are visible only when hovering over the graph. However, this information should be available to all people, regardless of their motor skills. It should therefore be possible to access the information using the keyboard (cf. WCAG 2.1.1 Keyboard,
In this line chart, detailed information about the lines is visible only when hovering. So they are hidden from keyboard users (Figure 4).
(Image: Screenshot with dark mode system setting https://www.dashboard-deutschland.de/energie/energie,
Of course, all other interactions, such as focusing on individual data series or selecting and deselecting them, should also be possible using the keyboard alone (see also Figure 2).
