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.
The method works for many types of diagrams such as the following simple diagram of a house.
A more complex example are diagrams rich of structural information such as the following chemical diagram.
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.
This technique can also be applied to other structured content such as musical scores, see this simple example score.
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).
This approach is independent of the markup; here is the same equation laid out using HTML with CSS.
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.