Making Equations Accessible

What is it? 

Inaccessible equations can be a barrier to learning for many students, particularly those who rely on assistive technologies. Ensuring equations are accessible promotes inclusivity, supports diverse learning needs, and adheres to institutional accessibility guidelines.  

How To Make Equations Accessible

Here are some best practices for making equations accessible: 

Use MathML for Accessibility 

MathML is a markup language that allows equations to be read and interpreted by screen readers. Whenever possible, use tools that generate MathML. 

Many equation editors, such as MathType and LaTeX (with MathJax), can export content to MathML. 

Learning management systems (LMS), such as Canvas, often have built-in equation editors that support MathML. Canvas also supports the inclusion of LaTeX code using delimiters \( ... \) for inline equations and \[ ... \] for block equations. This feature can be used across all areas in Canvas, such as discussions, announcements, pages, messages, etc.

Example using MATH ML language 

 Figure 1: 2x2 multiplication matrix [(1,2) (3,4)] with another 2x2 matrix [(0,1) (0,0] resulting in a 2x2 matrix [(0,1) (0,3)].

Figure 1 is an example of a multiplication matrix that was coded using MathML. To properly display the equation, use the code below


<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mrow>
    <mo>[</mo>
    <mtable>
      <mtr>
        <mtd><mn>1</mn></mtd>
        <mtd><mn>2</mn></mtd>
      </mtr>
      <mtr>
        <mtd><mn>3</mn></mtd>
        <mtd><mn>4</mn></mtd>
      </mtr>
    </mtable>
    <mo>]</mo>
    <mo>⁢</mo> <!-- Invisible times -->
    <mo>[</mo>
    <mtable>
      <mtr>
        <mtd><mn>0</mn></mtd>
        <mtd><mn>1</mn></mtd>
      </mtr>
      <mtr>
        <mtd><mn>0</mn></mtd>
        <mtd><mn>0</mn></mtd>
      </mtr>
    </mtable>
    <mo>]</mo>
    <mo>=</mo>
    <mo>[</mo>
    <mtable>
      <mtr>
        <mtd><mn>0</mn></mtd>
        <mtd><mn>1</mn></mtd>
      </mtr>
      <mtr>
        <mtd><mn>0</mn></mtd>
        <mtd><mn>3</mn></mtd>
      </mtr>
    </mtable>
    <mo>]</mo>
  </mrow>
</math>

Automatic Conversion

When you use the equation editor in the Rich Content Editor (RCE), Canvas automatically converts equations to accessible content via MathJax. 

Suggested video: Math Editing in Canvas RCE 

Compatibility Issues

If you still see images instead of rendered math content, it could be due to using outdated browsers or problems with the code. Modern browsers support SVG (Scalable Vector Graphics) for visual rendering and MathML (Mathematical Markup Language) for accessibility. Canvas provides MathML for assistive technologies when it detects equations.

MathJax

A JavaScript display engine that supports accessible rendering of LaTeX and MathML.

Canvas uses MathJax to render mathematical equations, so they are accessible to screen readers and displayed properly.

Additional Resources 

What's MathJax?

Suggested video: What's MathJax?

Avoid Using Only Images of Equations 

Images alone are not accessible to screen readers. If you must use images of equations, provide alternative text descriptions or accessible transcripts.

an organic chemistry formula, see below for alt text example

Alternative Text Considerations

Alternative Text Example

Bond-line structure of adipic acid, showing a six-carbon chain with two terminal carboxylic acid groups (–COOH). Each line represents a chemical bond and corners or ends without element symbols represent carbon atoms. All carbon atoms form four bonds; if fewer than four bonds are shown, the remaining are implied to be with hydrogen atoms. The image includes the text: "adipic acid" and "Chemical Formula: C₆H₁₀O₄. 

Additional Resources

Penn State Accessibility- Equation Format and Accessibility