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.