Accessible D3 donut charts | A11y With Lindsey

A solid tutorial on making an accessible donut chart with D3. A couple of options are discussed, along with the pros/cons of each. I personally prefer the first option, where the labels and data are intrinsically tied together.

On creating accessible tooltips that can be accessed by mouse and keyboard events:

To make tooltips accessible, we have to do a few things:

1. Add a tabindex="0" to all the arc paths so that we can tab to it.
2. Add an aria-describedby to each selected path with a unique value
3. Add an id to the tooltip that matched the aria-describedby value. Because each id must be unique, we have to create multiple tooltips.
4. Make sure that we add not only mouse events, but focus and blur events.

On ways to remove the redundant ARIA roles in SVGs, which are acting more like Canvas elements:

I learned through manual testing is that every single path element (the arcs) had a role of Image. And it announces on a screenreader. As a result, I’m going to put a role="presentation" on each path.