How to Publish Accessible Math on the Web

Prefer structured mathematics

Use ordinary text for simple symbols and semantic mathematical markup for structured expressions. Native text and MathML can be selected, enlarged, searched, and interpreted more reliably than a screenshot.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msup><mi>x</mi><mn>2</mn></msup>
  <mo>+</mo><msup><mi>y</mi><mn>2</mn></msup>
  <mo>=</mo><msup><mi>r</mi><mn>2</mn></msup>
</math>

A visual renderer can still be used, but keep an accessible representation and readable source.

Explain notation in context

A screen reader may speak a symbol name without explaining its role in the current subject. Define variables, domains, and unusual conventions in nearby prose. For a central equation, provide a concise reading such as “x squared plus y squared equals r squared.”

Make equation images equivalent

Use an image only when structured output is not practical. Its alternative text should communicate the mathematical content, not say “equation image.” Complex derivations may need a short alt attribute plus a longer description in adjacent text.

<img src="quadratic-formula.svg"
     alt="x equals negative b plus or minus the square root of b squared minus four a c, divided by two a">

Do not duplicate a long visible explanation inside the alt attribute.

Support zoom and reflow

Equations must remain readable at increased text size and narrow widths. Avoid clipping, fixed-height containers, and images that become blurry. For a wide derivation, allow horizontal scrolling inside a clearly focused region rather than forcing the entire page to scroll sideways.

Preserve keyboard access

Copy buttons, expanders, tabs, and equation editors must work from the keyboard and expose clear focus indicators. A decorative symbol should not receive focus. Interactive math tools need labels, instructions, error messages, and results announced in a predictable order.

Test with assistive technology

Inspect the accessibility tree, navigate headings and controls with a keyboard, and test representative equations with at least one screen reader available to the project. Listen for grouping, superscripts, fractions, and operators rather than checking only whether some speech occurs.

Common failures

• Rendering every equation to canvas with no alternative.
• Using color alone to distinguish variables or steps.
• Providing a generic “formula” alt text.
• Hiding visible equations from assistive technology without an equivalent replacement.
• Allowing mobile overflow to cover controls or text.

Verify before release

Test the final production page at high zoom, in a narrow viewport, with keyboard-only navigation, and with the site’s actual fonts and scripts. Record the browser, renderer, and assistive technology used so later updates can repeat the same checks.

Test the accessible representation

For accessible math on web, keep the visual equation and its semantic or textual alternative synchronized. Read the alternative without looking at the equation: it should preserve the relation, grouping, bounds, scripts, and variable names rather than listing isolated symbols.

Verification sequence

1. Navigate to the equation using only the keyboard.
2. Inspect the accessible name or MathML tree.
3. Listen with at least one screen-reader and browser combination available to the publishing team.
4. Recheck after conversion to PDF, image, presentation, or another content system.

When an image is unavoidable

Retain the editable source, provide a concise alternative for simple expressions, and add a longer adjacent explanation for equations whose structure cannot be expressed clearly in a short alt attribute.