On Math Equation Rendering and Accessibility Conflicts
This equation has no easy solution
I’m a big fan of international standards like SI units, the ISO date format, the C programming language, and floating-point numbers. They provide consistent formatting, organization methods, rules, and representations of concepts that other people can build upon. Two people in different companies located in different countries who speak different languages can work together because they use the same agreed-upon common basis and definitions. However, in my opinion, one issue that current standards have yet to solve is agreeing upon a unified, fully accessible way to both write and display mathematical expressions and notation online. It’s frustrating that choosing one of the pre-existing math rendering methods forces me to weigh their pros and cons and choose which types of users will have trouble understanding my article in the process.
I’ve had this article bouncing around in my head for some time; it turns out that now is the perfect time to post it since the March 2024 Indie Web Carnival’s theme is “Accessibility in the Small Web”. Now, I’m not an expert on accessible web design; I don’t have vision issues, nor do I know someone who does. But, I do know that accessibility is so important that some people (including me) shorten it to “a11y”. As someone who is passionate about math and knows how inaccessible it can be to the public, I want to take whatever steps I can to make my articles more readable for everyone.
Before we start with how math rendering is done online, let’s first look at the most popular way I know of for how it’s done offline: the TeX typesetting system and the LaTeX document preparation system. While I do have some opinions on its steep learning curve and annoying barrage of boilerplate code, I can’t deny how influential LaTeX is in academia, scientific communication, and publishing. If you work in a STEM field like I do, I would be surprised if you hadn’t heard about these tools. TeX was invented by the famous computer scientist and mathematician Donald Knuth in 1978 to help aid researchers in typing mathematical symbols and equations. Leslie Lamport then extended TeX to create the LaTeX document preparation system in 1984.1 LaTeX is highly configurable and extensible; packages from the CTAN (Comprehensive TeX Archive Network) provide extra functionality ranging from special characters for mathematical symbols to board game diagrams. The default LaTeX font families have been burned so deep into my mind that I have begun to recognize their use in books and scientific documents.
While LaTeX and its typesetting system aren’t official international standards, they have stood the test of time, so they might as well be ones. The format for math equations basically hasn’t changed since the late seventies and is relatively readable once you know enough of the syntax. There are several ways to denote math environments in LaTeX documents, but I use two dollar signs like in the code block below. Most commands in LaTeX are written with backslashes, and inputs to these commands are enclosed in curly braces. For example, here’s how I would write the definition of the Gaussian probability distribution as a LaTeX equation, and what it looks like rendered.
$$
f_X(x) =
\frac{1}{\sigma \sqrt{2\pi}}
\exp\left(-\frac{1}{2} \left(\frac{x-\mu}{\sigma}\right)^2\right)
$$
LaTeX excels at writing equations for documents and printing, but they are hard for screen readers to process. If you show an equation as an image like the one above inside an HTML or PDF document without proper alt text,2 then a screen reader won’t be able to read it aloud for a low-vision user. If you show an equation as an SVG element, then the screen reader might only read the symbols without the “punctuation” like fractions and parentheses. While rendering equations as images makes them resilient to changing web standards, I think that they look ugly and out-of-place.
This is where MathML comes in: it is an extensible markup language (XML) for describing both the content and structure of mathematical notation on the internet. It has been a W3C recommendation since 1998 and an ISO standard since 2015.3 Most screen readers can parse MathML and read it aloud for low-vision users. Plus, MathML can be embedded into other XML formats like DocBook documentation and EPUB ebooks.
MathML’s syntax has two parts: Presentation MathML syntax purely describes the arrangement of symbols in mathematical expressions, while Content MathML syntax is more descriptive of what actually is going on in the expression. Both parts of MathML’s syntax can be used together, but that doesn’t stop it from being an absolute pain to write by hand compared to other equation writing formats. For example, compare the MathML code block below to the LaTeX code block above: both render the same equation, but MathML takes way more characters to do it. However, one of MathML’s main design goals is to allow for easy conversion from other math rendering formats.4 Tools like LaTeXML are great for converting LaTeX syntax into presentation MathML so that you don’t have to write it yourself.
<?xml version="1.0" encoding="UTF-8"?>
<math
xmlns="http://www.w3.org/1998/Math/MathML"
alttext="f_{X}(x)=\frac{1}{\sigma\sqrt{2\pi}}\exp\left(-\frac{1}{2}\left(\frac{x-\mu}{% \sigma}\right)^{2}\right)"
display="block"
>
<mrow>
<mrow>
<msub>
<mi>f</mi>
<mi>X</mi>
</msub>
<mo>ࠌ</mo>
<mrow>
<mo stretchy="false">(</mo>
<mi>x</mi>
<mo stretchy="false">)</mo>
</mrow>
</mrow>
<mo>=</mo>
<mrow>
<mfrac>
<mn>1</mn>
<mrow>
<mi>σ</mi>
<mo>⁢</mo>
<msqrt>
<mrow>
<mn>2</mn>
<mo>⁢</mo>
<mi>π</mi>
</mrow>
</msqrt>
</mrow>
</mfrac>
<mo>⁢</mo>
<mrow>
<mi>exp</mi>
<mo>⁢</mo>
<mrow>
<mo>(</mo>
<mrow>
<mo>-</mo>
<mrow>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
<mo>⁢</mo>
<msup>
<mrow>
<mo>(</mo>
<mfrac>
<mrow>
<mi>x</mi>
<mo>-</mo>
<mi>μ</mi>
</mrow>
<mi>σ</mi>
</mfrac>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
</mrow>
</mrow>
<mo>)</mo>
</mrow>
</mrow>
</mrow>
</mrow>
</math>If your browser can parse it, here is what the MathML code in the previous code block looks like when rendered in your browser’s native engine. Gecko-based browsers like Firefox have first-class MathML support on all platforms, so you might want to view this article there instead.5
Although MathML is part of HTML5, it’s rare to find someone using it on its own to render equations on websites. Not only is its implementation inconsistent across different browsers, the standard itself doesn’t specify how equations should be rendered.6 Additionally, Google Chrome’s development team pulled MathML support from their browser in 2013 citing security concerns and low usage,7 coincidentally around the same time that Chrome started to dominate the browser market. While MathML support didn’t return to Chromium-based browsers until Igalia brought it back in January 2023,8 the damage had already been done. Now, as of writing this article, 5.63% of internet users use browsers that still don’t support MathML.9
This is where polyfills like MathJax and KaTeX come to the rescue: these JavaScript libraries can parse LaTeX equation syntax written in an HTML file and render them across all browsers consistently. Here’s the same equation from before, now written with MathJax (assuming you have JavaScript enabled).
\[ f_X(x) = \frac{1}{\sigma \sqrt{2\pi}} \exp\left(-\frac{1}{2} \left(\frac{x-\mu}{\sigma}\right)^2\right) \]
Between the two, I like MathJax more. It’s sponsored by NumFOCUS, has big-name organizations as partners, and can parse other formats like MathML and AsciiMath. Its internal mathematical representation format is an extension of MathML, implemented as JavaScript objects instead of the domain object model (DOM) like HTML files. Plus, it’s customizable both on my side as the webmaster and on your side as the user. I used KaTeX while Hugo was my static site generator. It was made by Khan Academy (hence the “Ka” in its name); it’s smaller and faster than MathJax at the cost of being less configurable. Both are built into Quarto, my publishing system and site generator of choice.
Recently, I saw that Hugo finally added mathematical equation support in February 2024, which was one of the issues I had with it when I used it in 2023. The official documentation explains how it’s done: Hugo’s goldmark Markdown renderer skips over text inside specific characters so that MathJax or KaTeX can handle the rendering.10 I was so excited when I saw this that I tried it out the same day. Hopefully, the Quarto documentation gets updated with this new information.
Polyfills, of course, require JavaScript to run properly. I already know that my website doesn’t work well without JavaScript, but disabling it with ad-blocker or with reader mode can either expose the inline LaTeX expressions (e.g., \(a^2 + b^2 = c^2\)) or remove them entirely. Additionally, the source code for these polyfills may come from an external content delivery network (CDN). While this wouldn’t be an issue for me as a viewer in the contiguous United States, what if you view it from elsewhere? Then, the CDN could take longer to load, making you wait more for all the equations to render… and that’s assuming that the CDN isn’t blocked in your country. MathML is part of the website; no additional wait time is needed for equation rendering, and it shows up in reader mode (or, at least, it does in Firefox).
So, to review:
Equations as Images
- Pros:
- Resilient to changing web standards
- Consistent across browsers
- Cons:
- Relatively large file size
- ugly and un-themeable
- Must write alt text manually for each equation
Equations with MathML
- Pros:
- ISO standard
- W3C recommendation
- Included in HTML 5
- Parsable by screen readers, no alt text writing needed
- Works in some browsers’ reader modes
- Ecosystem of tools for converting from other formats
- Cons:
- Inconsistent across browsers
- Hard to write manually
Equations with Polyfills
(e.g., MathJax and KaTeX)
- Pros:
- Consistent across all modern browsers
- Parsable by screen readers, no alt text writing needed
- MathJax is interactive
- KaTeX is fast
- Some SSGs have built-in integration or third-party plugins
- Cons:
- Not visible in browser reader modes
- JavaScript required (unless reader knows TeX)
- MathJax is bulky
- KaTeX can’t parse MathML as input
As a hobbyist in web development and recreational mathematics, I really want to use MathML on my website; unfortunately, the web support for it just still isn’t there yet. Choosing the way in which accessible math is rendered on a website causes an accessibility conflict. Selecting one solution to use over the others alienates the user bases who need the other solutions. On one hand, polyfills make math equations accessible for low-vision users, but cryptic for non-JS users. MathML makes equations accessible for low-vision users, but cryptic for non-MathML users. Using both MathML and MathJax will alienate non-JS, non-MathML users. Rendering equations as images are a no-go entirely, and I definitely don’t want to make my own equation rendering system like Douglas Rumbaugh did with his website.
About 1% of web users browse with JavaScript disabled,11 which is less than the percent of web users who browse without MathML support;12 I’m keeping MathJax in the meantime. Personally, I have a hunch that if you are knowledgeable enough to understand how to disable JavaScript in your browser or use one that predates it like Lynx, then you may already know enough about LaTeX to understand it without the need of a JavaScript polyfill.
References
Footnotes
I’ve written out what Orca, the screen reader bundled with my Linux computer, would read aloud in the alt text of the rendered equation image. Depending on your browser, you can view the image’s alt text if you right-click it and inspect its accessibility properties.↩︎
If you haven’t switched to Firefox already, I highly suggest you do so; but that’s a topic for another article.↩︎
Shankland, “Google Subtracts MathML from Chrome, and Anger Multiplies”.↩︎
Larabel, “Chrome 109 Released With New CSS Features, MathML Core, CHIPS”.↩︎
Silver, “JavaScript Isn’t Always Available and It’s Not the User’s Fault”.↩︎