MathML for Accessible Math Markup

Monday, Jan 1, 2018

In order to create semantically accurate math equations that are accessible to people of diverse abilities, it is imperative to leverage the power of MathML. MathML is a markup language that provides semantic understanding and proper syntax to assistive technologies like screen readers. Princeton's instance of the Drupal CMS now offers users the ability to author semantically accurate math equations with the use of LaTeX. These features can be turned on in the configuration of your site, speak with Web Development Services for technical assistance.

Sample Equation

In this sample equation we are trying to communicate that one half plus one half equals one. Drupal content authors can now enter LaTeX short hand to produce MathML formatted math equations. The equations will be rendered through the MathJax javascript library in a user's web browser. 


To render this equation in Drupal add the LaTEX shorthand of \frac{1}{2}+\frac{1}{2}=1 surrounded by double dollar signs ($$) and Drupal will render the properly formatted MathML via the MathJax library. 

Experience With a Screen Reader

Using the JAWS screen reader version 16 on Internet Explorer 10 the following is read aloud by the synthesized voice: 

Output from the screen reader reads: 

One half plus one half equals one; math content.

Why Not Use an Image With Alt Text?

Whereas an alternative text description on an image of a math equation is better than nothing, it still a violation of Success Criterion 1.4.5 Images of Text. Presenting an equation as an image denies the ability of the non-sighted user to derive the understanding through semantics in an equivalent fashion to a sighted user. The example in this post is a very simple one but imagine a complex math equation. In oder to deliver a fair and inclusive experience, we should be using proper markup for math equations that is available via MathML. 


World Wide Web Consortium's site on MathML

Princeton University Beginner's Guide to LaTeX

Free LaTEX complier

Recent updates

Creating highly accessible Web content is complicated, and tends to start with a lot of training. At some point the question needs to be asked: how...

Aira, an augmented reality technology for people who are blind or have low vision, or who have print disabilities,...

Princeton maintains the same high standards for accessibility during virtual learning and working as it does on campus.

At the 2019 M-Enabling Summit, the Office of Information Technology's User Experience Office was recognized by the International Association of...

Identify the Language of the Page and Parts for an Accessible Experience