Making chem-BV-ox.svg more accessible

Notes on the changes made to chem-BV-ox.svg and how these helped improve its accessibility.

Starting point

This is a diagram representing a process in organic chemistry, showing how adding one substance to another can be used to force a change.

Specifically, it shows the process known as Baeyer-Villiger oxidation, in which a

Preparation

Clean the code.
Everything was path elements, including text. And most of them were over-complicated.
Order the content according to logic
There are four phases of the reaction process. Ordering the elements according to the phases makes it easier to group them.
Use defs and use elements
Many things are repeated. It seems logical to rely on use elements instead of duplicating code. But it might not work properly.

Accessibility steps

Note that the work is only in an experimental phase, and incomplete. This is partially a statement of goals, and only the "make real text" step has already been applied throughout.

Use real text
For elements, represented by letters (which correspond to their common chemical names), use actual text.
Provide titles and descs.
Adding information to each item as necessary to describe what it is.
Hack: use aria-labelledby (and aria-describedby)
I don't know of any screenreader that supports the title element except for presenting the first one as a title of an image, nor any screenreader that supports the desc element, without the redundant aria attributes being used.
Hack: use aria-labelledby (and aria-describedby) in use elements not the defs they clone
I don't know of any screenreader that provides alternatives included within defs, even when made with aria, unless redundant aria attributes within the use element point to the alternative used.
To Do: highlight styles
Provide style rules for focus/hover, so users can easily identify what they are focused on.
To Do: make the layout "responsive"
The current layout is linear, not very high but very wide compared to most real screens. Making it flow more naturally in the user's screen seems like a sensible thing to do.
To complete: use tabindex="0" to make the thing navigable.
Using tabindex="0" makes it possible in some browsers to navigate the structure using the keyboard.
To complete: Present the content as lists.
use role="list" (and listitem) to break the phases, and items relevant to each phase, into screen-reader-navigable lists
To complete: Present each molecule with role="list"
This works, because each molecule in the equation can be represented as a tree structure
Worth completing? Use aria-flowto
This doesn't actually work very well, especially when it should support multiple possible destinations and might be a bad idea.
It seems to sometimes crash VoiceOver :(