A lightweight walker for equation layout

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

Try this: focus an equation (click on it or tab to it), then use the arrow keys. If you're using a screenreader, use browse mode until you hear an equation, 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 equation.

CSS layout

The solution to the quadratic equation

is really overused as an example.

SVG layout

The solution to the quadratic equation

is really overused as an example.

A non-equation

The same method works for other complex content as well.

barretr (Open Clip Art Library) [CC0], via Wikimedia Commons

A chemical diagram

Another example using a chemical diagram.

O OH O O
Originally User:Benjah-bmm27 [Public domain], via Wikimedia Commons