Accessibility in Mathematics
All math formulas and equations need to be converted to accessible screen reader friendly formats, like MathML or HTML. The support materials below have been provided by the Department of Mathematics, Teaching Pit Crew. Additional resources may be found on this departmental webpage.
LaTeX to HTML (LaTeXML)
Contributions by Arshak Petrosyan
LaTeXML Overview
- LaTeXML is a project developed at NIST that converts LaTeX files into accessible HTML documents. It is quite advanced and is used by arXiv.org for their experimental automatic conversion of preprints to HTML.
- Project links:
- Official LaTeXML page: https://math.nist.gov/~BMiller/LaTeXML/
- Manual: https://math.nist.gov/~BMiller/LaTeXML/manual/
- Conversion examples:
- NIST Digital Library of Mathematical Functions
- Go to https://arXiv.org, open any recent arXiv preprint and click the html link on the abstract page.
Using LaTeXML
Basic Command-Line Workflow
If you are comfortable with the command line, the workflow typically involves two steps:
latexml --dest=yourfile.xml yourfile.tex
latexmlpost --dest=yourfile.html yourfile.xml
Here is an example.
Single-Step Conversion
latexml --dest=yourfile.xml yourfile.tex
Math Rendering Options
LaTeXML converts mathematics to MathML. Depending on browser support, this may render natively. Alternatively, you can instruct LaTeXML to use MathJax for more consistent presentation across browsers:
latexmlpost --format=html5 \
--javascript='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=MML_CHTML' \
--dest=yourfile.html yourfile.xml
Here is example using MathJax.
Installation
Installation is generally straightforward. See the official instructions at:
https://math.nist.gov/~BMiller/LaTeXML/get.html
macOS Note
While this is not listed officially, you cal also install it using homebrew.
brew install latexml
Additional Components
For full functionality (for example, to support graphics conversion), you may also need:
- ImageMagick
- A Perl interface to ImageMagick
Setting these up can be a bit involved. A simpler alternative is to edit the resulting HTML directly and insert images manually afterward.
Limitations and Best Practices
LaTeXML supports many standard LaTeX classes and packages (see the list at included bindings).
Some classes, such as exam.cls, are not officially supported. However, it is possible to create bindings for unsupported classes, even with the help of AI tools. (One can even use AI to create bindings: this working—though not perfect—binding for exam.cls was created with claude.ai.)
Also have a look at arXiv.org’s LaTeX markup best practices for HTML conversion using LaTeXML:
https://info.arxiv.org/help/submit_latex_best_practices.html.
PDF to HTML
Using Gemini
Contributions by Joe Chen
Using Gemini to Convert Handwritten Notes to Accessible HTML
Google Gemini can be used as a workflow tool to convert handwritten mathematical notes into accessible HTML documents.
Conversion Workflow:
- Handwritten notes are scanned or exported as a PDF.
- The PDF is uploaded directly to Google Gemini.
- The following prompt is used consistently for conversion:
Convert to accessible HTML compliant with WCAG 2.2 AA with complete MathJax headers and remove [cite].
- WCAG 2.2 AA compliance ensures the resulting HTML is usable with screen readers and other assistive technologies.
- Complete MathJax headers are required so that mathematical expressions render correctly and remain accessible.
- The instruction to remove [cite] suppresses Gemini’s default behavior of inserting inline citations.
Post-processing steps:
- If diagrams, graphs, or figures were drawn during class, the generated HTML is manually edited.
- Corresponding images are inserted, and appropriate alternative text is added to maintain accessibility for non-visual users.
Conversion examples:
Sample handwritten notes and their corresponding Gemini-generated HTML outputs:
- Sample 1: Original Notes | Converted Notes
- Sample 2: Original Notes | Converted Notes
Using Claude
Contributions by Mahesh Sunkula
Using Claude AI to Convert Handwritten Notes to Accessible HTML
Step 1: Prepare Your PDF
- Ensure the PDF is clear and readable
- Note any diagrams, graphs, or visual elements that will need descriptions
Step 2: Upload and Initiate Conversion
Upload both the PDF and template.html to Claude, then use the following prompt structure:
Standard Conversion Prompt:
Please convert the attached handwritten PDF lecture notes into a WCAG 2.2 Level AA compliant HTML document using the provided template.html file.
Key requirements:
- Use proper MathJax delimiters: \(inline math\) and \[display math\]
- Maintain semantic HTML structure with proper heading hierarchy (start at h3)
- Apply appropriate color-coded containers (definition, theorem, example, warning, important)
- Include detailed visual descriptions for all diagrams and graphs
- Ensure all mathematical expressions are properly formatted for screen readers
- Preserve all worked examples with step-by-step solutions
- Keep natural paragraph flow – avoid excessive bullet points
- Use tables only when comparing multiple values or showing structured data
- Bold only for truly critical terms (Definition:, Theorem:, Warning:, etc.)
- Maintain academic tone and precision
- Preserve the logical flow of the lecture
The lesson is: [Lesson Number] – [Lesson Title]
Step 3: Review Generated HTML
Check the converted document for:
Content Accuracy Checklist:
- ☐ All mathematical expressions are correctly transcribed
- ☐ Formulas use proper MathJax delimiters
- ☐ Examples include complete solutions
- ☐ Definitions and theorems are properly contained and labeled
- ☐ Visual descriptions are present for all technical diagrams
Accessibility Checklist:
- ☐ Heading hierarchy is logical (h3 → h4 → h5)
- ☐ No heading levels are skipped
- ☐ Color is not the only means of conveying information
- ☐ All content has sufficient color contrast (4.5:1 for normal text)
- ☐ Mathematical notation is properly structured for assistive technology
- ☐ Visual descriptions enhance STEM learning (not just decorative)
Step 4: Test with Assistive Technology
- Open the HTML file in a web browser
- Activate a screen reader (NVDA, JAWS, or VoiceOver)
- Navigate through headings to verify structure
- Test the mathematical expression pronunciation
- Verify visual descriptions provide adequate context
Step 5: Request Refinements (if needed)
Use these follow-up prompts for common adjustments:
For Math Corrections:
"Please fix the following mathematical expression in [section name]: [describe the issue]"
For Visual Descriptions:
"Please add a more detailed visual description for the graph in [section name] that describes [specific spatial relationships or features]"
For Structure Improvements:
"Please reorganize [section name] to better reflect the logical flow: [describe desired structure]"
Sample notes and their corresponding Claude AI-generated HTML outputs:
- Template 1: Original Notes | Converted Notes
- Template 2: Original Notes | Converted Notes
- Template 3: Original Notes | Converted Notes