Introduction to Accessible Data Visualizations with D3.js
Data visualizations can be great to communicate complex data in an easy way. Unfortunately, there’s a lot that can go wrong when it comes to accessibility. A few weeks ago I decided to navigate one of the highest listed COVID-19 dashboards with VoiceOver, and I barely could make it past the first graph before closing my browser in frustration. Your browser does not support the audio element. But they’re barely alone in this – and I can’t really blame them either. I have guaranteed made similar mistakes in the past, as most D3.js tutorials out there don’t mention accessibility, and a lot of visualization libraries built upon D3.js are inaccessible by default. Data is everywhere, and it should be accessible for all. So I decided to start writing my own series about it! This first tutorial will be quite broad, but we will go into more detail in upcoming posts. You will need to have a basic understanding of D3.js to follow along; but don’t worry, an intro to D3.js series is in the make as well. Starting point For this tutorial, we’ll start with a simple bar chart that visualizes the amount of unique visitors a website had in the last week. Days where the visitor count is 100 or lower will have to be highlighted as bad. There are a few issues with this graph: The colors of the bars and text don’t have enough contrast with the background The colors used become less distinguishable for colorblind people The meaning of the colors is not explained We don’t know the scale of the y-axis, or what’s visualized here There are no values mentioned This doesn’t communicate the exact amount of visitors to anyone, there’s only a visual indication of which days have more visitors than others Assistive technology (screen readers) won’t have any values to communicate to the user either, so blind people and people with low vision won’t get any information out of this We’ll go through these issues step-by-step, and will transform this in a graph that’s a lot more accessible already. Note that this is a fairly basic graph, with a small amount of data and no interactions. The more functionality and complexity we add, the more we’ll have to think of. Colors Let’s start by picking colors that meet the contrast guidelines (AA or AAA ratio), and still look different enough for different types of color blindness. Personally, I prefer using Figma for this, since I already use it in the design-phase as well. Usually I’ll copy-paste the colors in a separate frame and run the Able and Color Blind plugin on it. If you don’t use any program that supports this or just prefer working from the browser, Colorblinding and WCAG Color Contrast Checker are chrome extensions with the same functionality. For the sake of simplicity, I went for a standard darker blue/red solution, which is safe both when it comes to colorblindness and contrast. You can use tools like Khroma, Coolors or Colorsafe to help you create accessible palettes. If you want to be extra safe, or can’t avoid using colors that meet the guidelines when it comes to colorblindness, you can also add patterns to your graphs. Make sure to not overdo it and go for calm patterns, » Read More
Like to keep reading?
This article first appeared on fossheim.io. If you'd like to keep reading, follow the white rabbit.