Document Accessibility

Document Accessibility
STEM Documents

Volker Sorge

University of Birmingham, UK University of Birmingham Crest

MathJax Consortium MathJax Logo

Progressive Accessiblity Solutions Progressive Access Logo


Beyond Simple Textual Content

Easy answer: Because STEM is hard!

Long answer: It depends... but STEM is hard!

STEM content

Combines some of the hardest A11y Problems

And that's only the traditional content

Modern STEM Content

Let's look at some of the problems

Scripts and Vernacular

Note, that not every screen reader will generate the same output!

STEM Languages

STEM are infinite languages

Standard declarative approaches often fail



Many problems in one

Formula Examples

Graphical Material

Advanced Material

Looking at Math Documents

What's special?

What do we want?

History of Maths on the Web

Wishlist for Math Documents

Our Math documents on the web should be

Everything is possible in HTML

Not all is well supported by converters

Conversion of a Math Document

Different Sources:

Working with LaTeX Documents


pandoc rademacher.tex -o rademacher.html --standalone

or with make4ht

make4ht rademacher.tex

Initial Observations

pandoc result

make4ht result

Adding native rendering

pandoc rademacher.tex -o rademacher.html --standalone --mathjax

or with make4ht

make4ht rademacher.tex "mathjax"

This now should give nicely rendered math

Fixing layout issues

First remove

      max-width: 40em;

The document should now reflow. There are still a number of padding elements which might be annoying.

Fixing layout issues (2)

We can remove superfluous padding too:

      padding-left: 50px;

Removes the padding on the left hand side.

      padding-right: 50px;

Removes the padding on the right hand side.

Converting a Word Document

Source: Peter Krautzberger

pandoc word.docx -o testme.html --standalone --mathjax

Understanding MathJax

Including MathJax

MathJax is generally included. If not, it is easy to add a script tag to the header of the HTML file:

<script type="text/javascript" id="MathJax-script" async

This loads a basic configuration, which finds LaTeX and MathML code in the page and translates it into HTML with CSS styling.

MathJaxstill might need to be configured.

Look Ahead

Next lecture