A lightweight walker for labeled ARIA trees

This demo requires a browser with support for ES6 modules; anything not IE should work. Other builds of this library are available, see github.com/krautzource/aria-tree-walker.

For screenreader users, any recent release should work, e.g., NVDA, JAWS, Orca; for VoiceOver the instructions work on non-Safari browsers. On mobile, ARIA trees are not well supported in general.

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.

If you are not a screenreader user, use the options below to get similar results.

Options for non-screenreader user

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.


Musical score

This technique can also be applied to other structured content such as musical scores, see this simple example score.

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