What is latest Update on LaTeX accessibility for screen readers (Aug 2024)?

[pham_elaine]

Hello everyone,

I'm currently using LaTeX to render equations in Canvas pages, but I've noticed that the equations are rendered as images. I'm concerned about their accessibility for students using screen readers.

I've heard discussions about MathJax being enabled to improve accessibility back in 2020, but I'm not sure of the latest updates on this.

Could anyone provide insights on:

1. The current status of LaTeX accessibility in Canvas, especially regarding screen readers.
2. Whether MathJax is now enabled in Canvas or if there's another solution.
3. Best practices for making LaTeX equations accessible in Canvas pages.

Thank you in advance for your help!

[chriscas]

Hi @pham_elaine,

Form what I see, MathJax was added back in 2021.  Unfortunately, I'm not a math teacher, so my experience in this area is limited.  I believe equations are loaded as images as a fallback if the browser doesn't support MathJax or there are issues loading it, but there might be way more to this.  I've read some fantastic info around this from @James in the past, and perhaps if he has any free time in the future, he'd be able to comment on this, as he's a math teacher, a Canvas admin, and also a coder.

I hope the info I provided will help a little, and maybe someone else will be able to share more details with you as well.

-Chris

[James · Accepted solution]

MathJax was around before 2021. What happened in 2021 was that Canvas added the ability to include LaTeX anywhere -- discussions, announcements, pages, submission comments, inbox messages, etc. You can now use the \ ( and \ ) delimiters (take out the spaces in there) to put math anywhere in Canvas.

The image is a fall back. Even if you create the equation using the equation editor in the Rich Content Editor, what Canvas does is search for that element and replace it with the rendering needed to display it properly in your browser. That is, really old content from years ago was an image, but Canvas now replaces those images with Math content rendered using MathJax. If you're still seeing an image, you're likely not using a modern browser or there may be something wrong with the code.

All of the modern browsers support SVG, but that's for visual users. Some browsers also render MathML.

What Canvas does for accessibility, when it recognizes an equation, is to add MathML.

For example, here is an image I created with the equation editor.

<p><img class="equation_image" title="\small{(x+1)^{10}=x^{10}+20x^9+180x^8+960x^7+3360x^6+8064x^5+13440x^4+15360x^3+11520x^2+5120x+1024}" src="https://richland.instructure.com/equation_images/%255Csmall%257B(x%252B1)%255E%257B10%257D%253Dx%255E%257B10%257D%252B20x%255E9%252B180x%255E8%252B960x%255E7%252B3360x%255E6%252B8064x%255E5%252B13440x%255E4%252B15360x%255E3%252B11520x%255E2%252B5120x%252B1024%257D" alt="LaTeX: \small{(x+1)^{10}=x^{10}+20x^9+180x^8+960x^7+3360x^6+8064x^5+13440x^4+15360x^3+11520x^2+5120x+1024}" data-equation-content="\small{(x+1)^{10}=x^{10}+20x^9+180x^8+960x^7+3360x^6+8064x^5+13440x^4+15360x^3+11520x^2+5120x+1024}" /></p>

If you open up the developer tools in your browser and find that element on the page, Canvas used MathJax to add the MathML and it now looks like this.

<p>
<span class="math_equation_latex fade-in-equation" style="null">

<span class="MathJax_Preview" style="color: inherit;"></span>

<span class="MathJax_SVG" id="MathJax-Element-4-Frame" tabindex="0" style="font-size: 100%; display: inline-block; position: relative;" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;><mstyle mathsize=&quot;0.85em&quot;><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>(</mo><mi>x</mi><mo>+</mo><mn>1</mn><msup><mo stretchy=&quot;false&quot;>)</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mn>10</mn></mrow></msup><mo>=</mo><msup><mi>x</mi><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mn>10</mn></mrow></msup><mo>+</mo><mn>20</mn><msup><mi>x</mi><mn>9</mn></msup><mo>+</mo><mn>180</mn><msup><mi>x</mi><mn>8</mn></msup><mo>+</mo><mn>960</mn><msup><mi>x</mi><mn>7</mn></msup><mo>+</mo><mn>3360</mn><msup><mi>x</mi><mn>6</mn></msup><mo>+</mo><mn>8064</mn><msup><mi>x</mi><mn>5</mn></msup><mo>+</mo><mn>13440</mn><msup><mi>x</mi><mn>4</mn></msup><mo>+</mo><mn>15360</mn><msup><mi>x</mi><mn>3</mn></msup><mo>+</mo><mn>11520</mn><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>5120</mn><mi>x</mi><mo>+</mo><mn>1024</mn></mrow></mstyle></math>" role="presentation">

[a whole lot of SVG code I'm removing for space ]

<span class="MJX_Assistive_MathML" role="presentation">
<math xmlns="http://www.w3.org/1998/Math/MathML"><mstyle mathsize="0.85em"><mrow class="MJX-TeXAtom-ORD"><mo stretchy="false">(</mo><mi>x</mi><mo>+</mo><mn>1</mn><msup><mo stretchy="false">)</mo><mrow class="MJX-TeXAtom-ORD"><mn>10</mn></mrow></msup><mo>=</mo><msup><mi>x</mi><mrow class="MJX-TeXAtom-ORD"><mn>10</mn></mrow></msup><mo>+</mo><mn>20</mn><msup><mi>x</mi><mn>9</mn></msup><mo>+</mo><mn>180</mn><msup><mi>x</mi><mn>8</mn></msup><mo>+</mo><mn>960</mn><msup><mi>x</mi><mn>7</mn></msup><mo>+</mo><mn>3360</mn><msup><mi>x</mi><mn>6</mn></msup><mo>+</mo><mn>8064</mn><msup><mi>x</mi><mn>5</mn></msup><mo>+</mo><mn>13440</mn><msup><mi>x</mi><mn>4</mn></msup><mo>+</mo><mn>15360</mn><msup><mi>x</mi><mn>3</mn></msup><mo>+</mo><mn>11520</mn><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>5120</mn><mi>x</mi><mo>+</mo><mn>1024</mn></mrow></mstyle></math>
</span>
</span>

<script type="math/tex" id="MathJax-Element-4">\small{(x+1)^{10}=x^{10}+20x^9+180x^8+960x^7+3360x^6+8064x^5+13440x^4+15360x^3+11520x^2+5120x+1024}</script>

</span>
</p>

There is no image element at all anymore. There is now an SVG instead. There is now MathML.

To address each of your questions:

1. Unless you have legacy equations that were not created properly, Canvas takes great care for accessibility regarding math content. It does the best that any automated conversion can do.
2. MathJax is built in throughout Canvas, but it's version 2.7 instead of the more recent 3.2. That means some functionality doesn't exist, but support for older browsers (that Canvas itself doesn't support) is there.
3. Best practices are beyond the scope of this response. LaTeX is not accessible -- it's a display language; it tells you how to format things. Best practices for math accessibility need to semantic rendering of the content. Any automated rendering is going to have potential issues, so writing native MathML is the best for accessibility but is really difficult to write and MathML isn't supported by all browsers. LaTeX is a lot easier to write and Canvas automatically converts LaTeX to MathML, which is the recommended accessibility solution. For best practices and an explanation of the issues with each, What is MathML? from Accessibility by Design at Colorado State University does a good job covering the issues.

[DThomasMSDE]

Hi James,

Thanks for your help!

I am using NVDA to read my equations but I am having issues, for example, if I have an equation like with superscript, it reads it as a number such as 3 and not as cube, likewise, it reads square as 2.

Any help will be appreciated.

[James]

I know little about NVDA, but a search found this thread in the NVDA forums from 2022 about people trying to get x^3 to get read as x cubed. It made it sound installing the mathplayer option was helpful but that some quirks my be the result of the synth you're using.

The NVDA user guide section on math says it may be better to use a newer plugin than MathPlayer to handle math. It also says that MathML is supported. It doesn't mention MathJax or LaTex within webpages.

MathJax should convert the LaTeX to MathML, but that may be browser dependent. Have you tried this in different browsers?

Someone else may have more insight. I see you asked another question about this specifically -- I would put more documentation in there as the original post doesn't explain what kind of problems you're having and it's difficult for people to answer vague questions (you'll get answers that don't address your problem if you get anything). Also, you called it NDVA instead of NVDA in the title.