Create accessible math in Canvas

On this page:


Overview

To make math equally accessible to all students, you need to provide math in a digital form that can be read with a screen reader, just like with text. This is not possible in Microsoft Office without extra software, but it is easy to do in both Canvas and Pressbooks. The gold standard for providing accessible math is using MathML and MathJax to produce a navigable and scalable math object, which will also be accessible using a braille display. This functionality is built into Canvas; all you need to do is write out the math using LaTeX in a way that MathJax can understand.

A student equipped with a screen reader or braille display should be able to navigate any single-line math reasonably easily. If possible, expand equations with multiple cases so that each case appears as a separate equation on its own. If, as an instructor, you have received a course accommodation request, you will likely need to convert matrices and complex tables to braille. Fortunately, math that is screen-reader accessible will not require any further modifications before being submitted for braille conversion.

Encode accessible math in Canvas

Upon loading, Canvas pages are checked for LaTeX code or equation editor objects. If any LaTeX code or equation editor objects are discovered, MathJax will convert them into accessible math objects. To encode your math, use the equation editor, or:

  1. Navigate to the Canvas page, quiz, assignment, etc. where you want to insert math.
  2. At the upper-right, click Edit.
  3. Wherever you have or want to have math (for example, "a x b = 4"):
    1. Write it out using LaTeX (for example, a \times b = 4).
    2. If you want the math to be on its own line, put \[ and \] on either side (for example, \[ a \times b = 4 \]).

      If you want the math to be inline, put \( and \) on either side (for example, \( a \times b = 4 \)).

  4. Save. You should now see the math render from its LaTeX form into its visual and accessible MathML form.

Make math accessible in Canvas Classic Quizzes and Quick Checks

Unfortunately, because of the way browsers currently handle math and the way that HTML form elements have been designed, any math rendered with MathJax or straight MathML code that is included in the label of a form control (such as a radio button) will not be correctly conveyed to screen-reading software or other assistive technologies. This means that any LaTeX or equation editor objects placed in the answer options of a Canvas quiz or Quick Check multiple choice question (since they become radio button labels) will not produce accessible math. This limitation is not dependent on the user's hardware, screen-reading software, or browser.

Note:
Math in Canvas' New Quizzes is not accessible. You should instead use Classic Quizzes when math will be included.

Recommended workaround 1

Provide the answer options in the question area, using LaTeX code for the math and labels that correspond to labels in the answer selection area. This allows for the math in the answer options to be explorable.

For example:

Question area:

What is \(\sqrt{1i+2i}\)?

  1. \(\sqrt{i}\)
  2. \(\sqrt{3i}\)
  3. \(\sqrt{1i}+2i\)
  4. \(\sqrt{3+i}\)

Answer selection area:

  • A
  • B
  • C
  • D

Recommended workaround 2

Keep the math inside the answer selection area, but express the math in words using MathSpeak grammar. MathSpeak is often straightforward enough to pose no problem for sighted students, but to avoid any confusion, the best practice is to provide an image of the mathematics and set the image's alt-text to the math's MathSpeak equivalent. This allows the math to be viewed in the area where it will need to be selected, but it does not allow the math of the answer options to be explored.

For example:

Question area:

What is \(\sqrt{1i+2i}\)?

Answer selection area:

  • StartRoot i EndRoot
  • StartRoot 3 i EndRoot
  • StartRoot 1 i EndRoot plus 2 i
  • StartRoot 3 plus i EndRoot

Strengths and limitations

Straightforward formulas are easily perceived by non-visual readers

A student equipped with a screen reader or braille display should be able to understand any straightforward mathematical content easily. For example:

Rendering of the quadratic formula by MathJax. The text of how this would be read follows.

The above quadratic formula would be read aloud as:

x equals StartFraction negative b plus-or-minus StartRoot b squared minus 4 a c EndRoot Over 2 a EndFraction

Another example:

A logic formula as rendered by MathJax. The text for how this formula would be read follows.

The above quadratic formula would be read aloud as:

there-exists x for-all y left-parenthesis upper R x y identical-to upper R y x right-parenthesis

Formulas with a complex structure are less easily perceived by non-visual readers

LaTeX formulas that make extensive use of arrays, cases, or tables for structuring can be significantly complex and difficult to follow. For example:

A non-continuous equation with values defined for three distinct domains of x. The text for how this formula would be read follows.

The above function will be read aloud as:

if left-parenthesis x right-parenthesis equals StartLayout Enlarged left-brace 1st Row 1st Column 1 slash 3 2nd Column if 0 less-than-or-equal-to x less-than-or-equal-to 1 semicolon 2nd Row 1st Column 2 slash 3 2nd Column if 3 less-than-or-equal-to x less-than-or-equal-to 4 semicolon 3rd Row 1st Column 0 2nd Column elsewhere period EndLayout

If possible, describe complex formulas in the text, or expand the formulas that contain multiple cases into separate formulas for each case. For example:

Example of breaking up the complex formula above into three distinct formulas. The text for how this would be read follows.

This is an example of breaking up the complex formula above into three distinct formulas, one for each separate domain of x being described. It would now be read as:

if 0 less-than-or-equal-to x less-than-or-equal-to 1 semicolon f left-parenthesis x right-parenthesis equals 1 slash 3 less-than b r greater-than if 3 less-than-or-equal-to x less-than-or-equal-to 4 semicolon f left-parenthesis x right-parenthesis equals 2 slash 3 less-than b r greater-than elsewhere semicolon f left-parenthesis x right-parenthesis equals 0 period

This is document bgkz in the Knowledge Base.
Last modified on 2021-06-01 10:25:28.