New MathJax accessibility extensions provide collapsible expressions and maths-to-speech

MathJax, the web library that provides LaTeX-quality mathematical typesetting, has received a a new set of tools to improve accessibility of mathematical notation. The new MathJax Accessibility Extensions add on-the-fly speech rendering of notation, and a tool to explore expressions through intelligent collapsing and expanding of sub-expressions.

The base of the development is a tool to “semantically enrich” mathematical expressions, inferring information about the meanings of individual elements. This is not an easy job, and has required the development of thousands of pattern-matching rules to identify different notational conventions.

This semantic enrichment is passed directly onto a tool which works with a screen reader to read mathematical expressions aloud; the exploration tool lets you work through an expression piece-by-piece, using the keyboard to navigate.

The auto-collapse extension also makes MathJax behave better in responsive designs where the available width for rendered expressions can change, by intelligently picking break points and collapsing sub-expressions so they fit on smaller screens.

We’ve enabled the accessibility extensions on our site – right-click on the expression below and play with the “collapsible expressions” and “explorer” menus.

\[ c_p\rho \int_{x-\Delta x}^{x+\Delta x} [u(\xi,t+\Delta t)-u(\xi,t-\Delta t)]\, d\xi = c_p\rho\int_{t-\Delta t}^{t+\Delta t}\int_{x-\Delta x}^{x+\Delta x} \frac{\partial u}{\partial\tau}\,d\xi \, d\tau \]

In the future, the accessibility extensions will be included in the standard MathJax configuration, but for now you need to manually load them.

To load the accessibility extensions on your own site, you just need to add a line to your MathJax config script. Here’s a basic configuration:

<script type="text/x-mathjax-config">
  MathJax.Ajax.config.path["Contrib"] = "https://cdn.mathjax.org/mathjax/contrib";
  MathJax.Hub.Config({
    extensions: ["[Contrib]/a11y/accessibility-menu.js"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

When you’re reading a site that has loaded MathJax without the accessibility extensions, you can use this bookmarklet (drag the link to your bookmarks) to add in the extensions.

More information, including detailed instructions on how to use the extensions and demos of the new features, is at the MathJax blog.

Leave a Reply