Authoring Web-accessible Mathematical Diagrams
David Austin, Volker Sorge · 2023 · Proceedings of the 20th International Web for All Conference (W4A) · doi:10.1145/3587281.3588146
Summary
This extended abstract presents an XML-based authoring language for creating web-accessible mathematical diagrams, designed to integrate with PreTeXt, a tool for producing accessible scholarly documents. While text and mathematical formulas in LaTeX can be made web-accessible using tools like pandoc and MathJax, graphical elements like diagrams remain largely inaccessible. Existing diagram authoring tools like TikZ and Pstricks in LaTeX are powerful but require multiple cycles of visual inspection, making them difficult for visually impaired authors. The proposed system uses a simple XML vocabulary with intuitive mathematical terms organized into five functional groups: definitions and control, basic grids and axes, one-dimensional objects (graphs and lines), two-dimensional objects (areas and polygons), and labels. A Python script converts this XML input into SVG output that can be viewed in a browser or sent to an embosser for tactile output. Annotations are specified separately in a hierarchical XML structure, progressing from global descriptions to detailed element-level annotations, allowing screen reader traversal that differs from the visual drawing order. The resulting SVG diagrams are made accessible using the diagcess library, which enables step-wise exploration across different layers with aural rendering and sonification.
Key findings
The system delivers multiple accessibility features for the generated SVG diagrams. Aural rendering uses the browser's speech synthesis API or ARIA live regions to speak descriptions as users explore diagram elements. Highlighting automatically synchronizes visual emphasis with aural descriptions, achieved by dynamically changing CSS parameters on SVG nodes. Color adaptation supports high contrast modes and dark mode, with customizable contrast models. Magnification uses SVG animation to zoom into components being described, constraining the View Box to the relevant element. Sonification is available for SVG polyline and path elements using the Web Audio API, allowing users to hear the shape of mathematical curves. The system also generates alternate formats: tactile graphics using MathJax for Braille formula labels, and audio-tactile graphics compatible with the ViewPlus Iveo system. A key design choice is that the XML vocabulary mirrors mathematical concepts rather than visual drawing commands — authors describe "a function," "a tangent line," or "a point" rather than low-level graphics primitives, enabling automatic generation of common elements like grids, axes, and labels while reducing the need for visual inspection during authoring.
Relevance
This work addresses a significant gap in STEM accessibility: while mathematical formulas have mature accessibility solutions through MathML and MathJax, diagrams remain one of the most persistent barriers for visually impaired learners and authors. The approach is notable because it supports both consumption and authoring of accessible diagrams — enabling VI authors to create and verify their own mathematical graphics, not just consume content created by sighted peers. For educators using PreTeXt or similar authoring systems, this provides a practical path to including accessible diagrams in course materials. The multi-modal output — combining visual SVG, aural rendering, sonification, and tactile graphics from a single source — exemplifies the principle that accessibility content should be authored once and rendered in multiple formats. The open availability of the tool and its integration with established systems like PreTeXt and MathJax lower the adoption barrier for mathematics instructors.
Tags: STEM accessibility · mathematical diagrams · SVG accessibility · screen readers · sonification · tactile graphics · document accessibility · authoring tools
Standards referenced: ARIA