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

Jump to solution
pham_elaine
Community Member
Friday

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!

Labels (1)
Labels
0 Likes
1 Solution

Jump to solution
James
Community Champion
In response to chriscas
yesterday

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.

View solution in original post