Authoring Web-accessible Mathematical Diagrams (Short Paper)
David Austin, Volker Sorge · 2023 · Proceedings of the 20th International Web for All Conference (W4A) · doi:10.1145/3587281.3587297
Summary
This short paper presents a novel XML-based language for authoring accessible mathematical diagrams, targeting both visually impaired (VI) and sighted authors. Mathematical diagrams are essential for STEM subjects yet remain overwhelmingly inaccessible in electronic documents — even in online teaching materials they are typically provided as flat bitmap images. Compounding the problem, most diagram authoring tools rely on WYSIWYG editors with drag-and-drop interfaces that are themselves inaccessible to VI users. The authors address both the reading and authoring sides of this challenge. Their approach provides a descriptive XML vocabulary organized into five functional groups: definitions and control, grids and axes, one-dimensional objects (graphs, lines), two-dimensional objects (areas, polygons), and labels. Authors describe mathematical components using intuitive terms that mirror mathematical vocabulary — for example, specifying a function, its tangent line at a point, and labeled coordinates. A Python script converts the XML into SVG output viewable in browsers or suitable for embossing as tactile graphics. The system is designed within the context of PreTeXt, an XML-based scholarly document authoring tool, so that accessible graphics can be created directly within accessible documents and output to HTML, PDF, ePub, or Braille formats.
Key findings
The system separates diagram specification from annotation, allowing authors to define a hierarchical annotation structure that controls how screen readers traverse the diagram — independent of the drawing order. Many common elements (axes, grids) are annotated automatically, creating a standardized experience, while authors can provide bespoke annotations where needed. The resulting SVGs support multiple accessibility modalities: aural rendering via browser speech synthesis or ARIA live regions for screen readers; synchronized highlighting of elements during navigation; color adaptation for high contrast and dark mode; magnification via SVG ViewBox animation; and sonification of curves using the Web Audio API through an oscillator model. Mathematical labels are processed by MathJax, which renders them as SVG with aria-labels containing speech strings and can also generate Braille for tactile output. The keyboard navigation model allows step-wise exploration using arrow keys — Down to drill into detail layers, Right/Left to move between sibling elements, and additional keys for features like sonification. The vocabulary currently supports algebra and calculus diagrams with emerging support for linear algebra and discrete mathematics, and plans for three-dimensional content.
Relevance
This work addresses a fundamental barrier in STEM education: VI learners and educators cannot independently create or verify mathematical diagrams using existing tools. The "born accessible" approach — where accessibility is inherent in the authoring process rather than retrofitted — is particularly compelling because it means every diagram created with this language is automatically accessible to all readers. For accessibility practitioners, the multi-modal output strategy (visual, aural, tactile, sonified) from a single XML source demonstrates efficient inclusive design. The integration with PreTeXt positions this work within a growing ecosystem of accessible scholarly publishing tools. The separation of graphical specification from annotation is an important design insight: it acknowledges that the logical reading order of a diagram often differs from its drawing order, giving authors control over the screen reader experience. As STEM accessibility remains one of the most challenging domains, tools like this that lower the barrier for both creating and consuming mathematical content have significant practical impact for education.
Tags: STEM accessibility · mathematical diagrams · SVG accessibility · blind and low vision · sonification · screen readers · tactile graphics · authoring tools
Standards referenced: ARIA · MathJax