Reading and Writing Accessible Equations

By OZeWAI member Andrew Downie, Accessibility Consultant.

Introduction

Writing equations that both look as they should and are fully accessible can be a messy business. MathML is a laudable solution in terms of the end result in HTML pages. However, writing MathML directly is a tedious process and accessible tools to automate the process are rather light on the ground.

In this article we will bring together several resources which, together or separately, can remove the tedium.

What is MathML?

Here is a very simple equation:

$a=𝜋r^2$

To write such a simple equation using MathML, the following rather substantial code is required:

 <math xmlns='http://www.w3.org/1998/Math/MathML'>
	<mrow>
		<mi>a</mi>
		<mo>=</mo>
		<mrow>
			<mi>𝜋</mi>
			<mo>⁢</mo>
			<msup>
				<mi>r</mi>
				<mn>2</mn>
			</msup>
		</mrow>
	</mrow>
</math>

This is not a MathML lesson, so an explanation of the above is not forthcoming. However, Daniel Skully’s Beginner’s Guide to MathML is a helpful starting point.

The good news is that, as shown below, it is possible to generate effective code quite painlessly.

Microsoft Word Equation Editor

Microsoft’s Equation Editor has been available since 2007. A relatively recent and very exciting development is that it is now accessible to screen reader users. An important caveat is that this applies to Word as part of Office 365 only. Thatis the subscription version, not the one-off purchase.

It was previously necessary to install MathType to produce screen reader accessible equations in Word. MathType is not free and the equation creation process is not screen reader accessible. Provided the free MathPlayer is installed, maths content produced with the Equation Editor is now screen reader accessible.

Furthermore, the process of writing equations is also accessible to screen reader users, albeit with a bit of a learning curve.

Broader implications

While an equation is accessible within Word, it can also be copied as MathML and pasted into an HTML page. By default, equations are copied as Unicode, but this can be changed in Options in the Equation tab of the Ribbon (focus must be on the equation editor for the tab to appear).

Because Microsoft has anticipated use on an XML page, each MathML tag includes “mml:”. For use on an HTML page this needs to be removed. See the discussion of MathCAT below for a less complicated process.

Equations can be written as either Unicode or LaTeX (choose in the Equation tab). Those who work in academic environments and have consequently achieved some proficiency with LaTeX will likely prefer it, but the choice is yours.

But one crucial outcome is that screen reader users have a readily available accessible option for both writing and reading well formatted mathematical content.

MathJax

Beautiful and accessible math in all browsers

It took me some time to appreciate fully the potential of MathJax. In brief, by placing relevant JavaScript into the head of your HTML document, mathematical content as MathML, LaTeX and ASCIIMath will be rendered correctly (subject to the writer’s skills of course).

Applying the JS to MathML arguably improves its appearance. But its rendering of LaTeX or ASCII Math allows much more simple writing of equations. Here is the code for the above equation written with LaTeX notation:

\(a = \pi r^2\)

The \( at the beginning and \) at the end tell the browser that a LaTeX equation is contained within. LaTeX being LaTeX, there are other ways of doing so, depending on circumstances. Here is the JS to be put into the head of the document to render LaTeX equations:

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async
	src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>

And here is the same equation written as ASCIIMath. In this case the equation is surrounded by the ` character.

`a = pi r^2`

And now for the JS to render the ASCII Math:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML"></script>

Using the above scripts, internet access is necessary to have LaTeX and ASCII Math rendered correctly. The MathJax site provides info on an option for local rendering. And as exciting as all this is, there is more good news.

MathCAT

Earlier there was mention of MathPlayer as a means of presenting MathML content to screen reader users. It was developed by Neil Soiffer some twenty years ago. MathPlayer is no longer supported and Neil is refining MathCAT (Math Capable Assistive Technology) as a replacement.

Its output via synthetic speech is at least comparable to MathPlayer and output via electronic Braille is superior. At time of writing MathCAT is only available as an add-on to the NVDA screen reader, but other implementations are in the pipeline.

Meanwhile, users of other screen readers can still use MathPlayer. I also understand that the JAWS screen reader has an implementation of MathCAT in beta.

We will not dive into details of MathCAT and its interaction with screen readers. One notable feature, though, is its ability to copy all or part of an equation. Harking back to equations in Word for example, MathCAT can copy it and provide it as MathML without the complication mentioned when using Word’s copy facility.

Similarly, an equation on an HTML page written in MathML, LaTeX or ASCIIMath can be copied and pasted elsewhere as MathML, including into the MS Word Equation Editor. There are situations where this could be very helpful.

Conclusion

Especially for those who do not live and breathe code, the above may seem a bit overwhelming. But with a bit of familiarisation and practice, well formatted and accessible equations can be written for both web pages and MS Word documents.

While screen reader users have been able to read MathML equations for a couple of decades, it is pleasing that options for independently producing equations that are both visually appealing and accessible have broadened more recently.