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

x=b±b24ac2a

is really overused as an example.

SVG layout

The solution to the quadratic equation

x equals StartFraction negative b plus-or-minus StartRoot b squared minus 4 a c EndRoot Over 2 a EndFraction

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