Making chord.svg more accessible

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

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

Preparation

• cleaned the code - removed added cruft
• added a "protractor" for measuring each connection

Accessibility steps

highlight styles

Provide a style rule for users can distinguish individual connections

Group headings

Put each heading text with its background so it can function as a label.

use role="list" or listitem to make them two navigable lists

(doesn't work really well for Firefox, which makes the group an image and then reads the text)