A lightweight walker for labeled aria(-owns) trees

For development, this demo requires a browser with support for ES6 modules. Try current Firefox, e.g., with NVDA or JAWS.

Try this: focus a diagram (click on it or tab to it), then use the arrow keys. If you're using a screenreader, use browse mode until you encounter a diagram, then switch out of virtual/browse mode to explore with arrow keys. Depending on the screenreader you may have to move the focus to the diagram.

A simple diagram

The method works for many types of diagrams such as the following simple diagram of a house.

SVG modified from barretr (Open Clip Art Library) [CC0], via Wikimedia Commons.

A chemical diagram

A more complex example are diagrams rich of structural information such as the following chemical diagram.

SVG modified from Originally User:Benjah-bmm27 [Public domain], via Wikimedia Commons with annotations courtesy of Progressive Access.

A diagram created with D3.js

Another typical use case are diagrams created with D3 such as the simple (pre-rendered) tree diagram below. Of course it is also possible to do this client-side.


An equation in SVG

Another typical use case is equational content such as the following SVG describing the solution to the quadratic equation, created with MathJax and Speech Rule Engine (with additional post-processing, see the doc sources here).

An equation in CSS

This approach is independent of the markup; here is the same equation laid out using HTML with CSS.

A tikz diagram

It is also possible to leverage tikz for this purpose, combining special macros with dvisvgm. The following is a simple tree diagram; you can find the TeX source in the repository's docs folder.

root left right child 1 child 2