KaTeX A11y Mode

[jeresig]

This adds a new mode to the TeX.jsx module in which a new English-string form of the Math formula will be generated.

For example, if given the math string "4 + x" it'll generate something that looks like:

<span>
    <span class="mathjax" aria-hidden="true">...</span>
    <span class="katex" aria-hidden="true">...</span>
    <span class="katexA11y sr-only">4, plus, x</span>
</span>

Thus when someone accesses the above with a screen reader it'll read off "4, plus, x" and ignore the mathjax and katex spans. Likewise for a user that isn't using a screen reader they'll see the katex/mathjax render as normal. Note that the above only happens if the new katex-a11y module can successfully translate the math string into an English string. If it cannot then it abandons the attempt and just leaves the katex/mathjax in place, letting the screen reader handle it as-is.

To ensure that everything works as we expect it to I've added a bunch of tests. Specifically I've brought over the KaTeX tests and ensured that all of the existing TeX strings are converted into an English form that makes sense. Additionally I've exported every single KaTeX-parseable Math string from a selection of our curriculum on Khan Academy and have ensured that the new katex-a11y module is capable of translating them into an English string (I don't check the conversions as there are 15,000+ math strings and it would be really time consuming).

The important files are:

• js/katex-a11y.js: This is all of the new logic for converting a KaTeX-generated tree into an English string. I attempted to handle all the cases that I could find, although I'm sure there are a bunch that I haven't been able to spot and even more where the conversion doesn't make sense. This is probably a decent first attempt, though.
• js/tex.jsx: This is the module into which katex-a11y.js is imported and used. Some light modifications where made to make sure that the right spans were visible/invisible to the screen reader.
• test/katex-a11y-test.jsx: These are the tests which are run in the main mocha test runner.

There are two additional areas that I want to explore, but can wait a little bit to attempt:

• I've started work on making the math much more navigable. I've started to break the text into sub-spans with the hope of making it possible to navigate them using a keyboard. I initially added a tabIndex="0" to them but that made things pretty confusing, especially for non-screen-reader users.
• I want to mark all the strings up for i18n. Some more thought is going to have to go in to this but we primarily are worried about the English case, at the moment.

[jeresig]

One note: The changes to the katex files in the docs/ directory are due to the fact that I've pulled in the latest version of the lib. Additionally I've moved the font files to be in the stylesheets directory (which is where they should have been, seemingly). I was getting all sorts of errors in the console about that.

[jeresig]

@xymostech I think I've tackled (or addressed) all the feedback that you've provided so far (thank you!!). Anything else that you'd like me to address or am I ok to land?

[zgotsch]

Nice work guys! I love seeing this a11y work happen :)