Making sparse-chord.svg more accessible

Notes on the changes made to sparse-chord.svg and how these helped improve its accessibility.

See also the chord graph notes I made as a way to start thinking through the issues.

Starting fresh

Unlike most of the example here so far, I started without source code. Instead there was an image, and the question of whether it could be made accessible using link and other keyboard navigation.

Accessibility steps

Use aria-labelledby on titles

make the links

Connections from items on one side to the corresponding item on the other are links

Grouping

Each block representing a disease is a group, and the link to the corresponding block on the other side is a link, represented as a triangle covering the entire connection from one side but only reaching a point on the other.

ARIA

The set of blocks on each side are a list

Style

add a style to the links to increase visibility when they are focused

This document is on github - feel free to propose changes, offer information about browser support, etc.