Earlier this week, the State of JS 2023 survey results were published and, as always, the results are presented with a variety of different charts and graphs. Upon reviewing the line graphs, I noticed some common, easily fixable accessibility issues. In this post, I will discuss these issues and provide suggestions for improvement.
Use of colour alone
The line graphs are presented with a title, a legend, and the graph itself. However, these graphs rely on color alone to convey information. This is problematic because around 1 in 12 men (approx. 8% of the population) and 1 in 200 women (approx. 0.5% of the population) have a red-green color vision deficiency. Other types of color vision deficiencies mean that about 1 in 10 people may have difficulty distinguishing all the colors used.
We can emulate color deficiencies in Chrome to demonstrate how the graphs appear to people with these conditions.
Emulated protanopia (no red)
Without red, distinguishing between reds, oranges, yellows, and greens is challenging.
Emulated deuteranopia (no green)
Without green, it's also difficult to distinguish between reds, oranges, yellows and greens.
Emulated tritanopia (no blue)
Without blue, the blues and greens become difficult to distinguish and the reds and oranges also become harder to tell apart.
Emulated achromatopsia (no colour)
Without colour, all lines become a shade of grey.
What's the solution?
There are several ways to improve these graphs to ensure they do not rely on color alone.
Different Line Styles
Different line styles (e.g., dotted, dashed, and solid lines) can be used to differentiate the lines. Additionally, various shapes (e.g., circles, squares, triangles) can mark data points.
Here's an example using different shapes for each data point (albeit poorly photoshopped):
There are still some downsides with relying on a legend to communicate the relationship between data points and their category. Legends can be difficult to use for people with certain eye conditions or cognitive disabilities.
Label the Lines Directly
Labeling the lines directly removes the need for a legend, making it easier for users to identify each line. This approach may require more space on the y-axis to accommodate the labels, especially where lines overlap.
Here's an example with labels directly on the lines (again, a rough edit):
Alternative text and text alternative
I tested the graph with NVDA, a screen reader, and found that it was an unusable experience. The screen reader read out each element of the y-axis first, then the x-axis, but it didn't specify what these axes represented.
When it got to the graph, it was an unusable experience for anyone using a screen reader. Each part of the graph is made up of many paths in an SVG. NVDA went wild, reading "Graphic, clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable clickable..." and any normal person is left thinking "please make it stop!!!"
The SVG should be given a role="img" and then an alternative text between two <title> tags which describes the graph. And because these graphs present a lot of information, it should ideally be presented in another way such as in a table. Screen reader users can navigate through tables to get information but presenting info in another way is also useful for many other people.
Graphs are not the easiest things for many people to read. They require quite a lot of cognitive energy to work out what the different x and y axes are and what is being shown. Giving people the option of seeing data presented in different formats helps people to understand the way they can best.
In summary
A few small tweaks can significantly improve the accessibility of these line graphs:
- Differentiate lines by more than just color.
- Label lines directly whenever possible.
- Avoid using legends if possible.
- Present information in multiple formats, such as tables.
Implementing these changes will make the graphs more accessible and ensure that a broader audience can benefit from the valuable insights they provide.
Top comments (4)
Survey creator here, thanks for the great write-up! Labeling the lines directly would be nice, but as you mentioned I'm not sure how to deal with label collisions in a way that works reliably… The custom shapes could work though! I will keep thinking about it.
As for the poor screen reader experience, that's also something that should definitely be improved. One idea I've had would be to feed the raw data into ChatGPT and then generate a text description of the chart contents. The main issue is that it could get quite verbose for charts with a lot of data…
By the way we did have data tables in past years, but I didn't have time to reimplement them this year (currently you only have access to the raw JSON data).
Anyway lots to think about! Thanks again for taking the time to write this up!
Happy to see that a creator directly comments on this article and is trying to improve in the future!
This is great! Just what I was looking for in my project
Great article, Emma! Thanks a lot for doing the testing and share with the community to learn and improve.