Accessible Online Teaching: Math Equations

Two Editing Options

There are two primary options for adding math content to a Canvas page, and both options can be used to create accessible equations. They are:

1. Using the Canvas Math Editor that is built into the Rich Content Editor.
2. Adding MathML code in the HTML view of a Canvas page or other location in Canvas where the Rich Content Editor is available.

Most instructors will likely prefer to use the Canvas Math Editor, but the other options are available if a development team prefers to directly input MathML.

Canvas Math Editor

Using the built-in math editor creates accessible equations. Canvas displays the content as a scalable vector graphic (SVG) image, which enlarges without distortion. It also includes ALT text and MathML as described below.

• The LaTeX code equivalent of the equation is inserted to the image’s ALT Text and is heard by screen-reader users.
  Note: LaTeX is a math notation language developed for publishing of STEM content.
• In addition, MathML code is generated in the background and is read after the LaTeX. This sounds like correctly spoken math and includes a "math viewer window" that allows the user on a screen reader to explore the different components of the equation using the Tab and arrow keys.
• LaTeX code is also displayed visually on mouseover.

Where’s the Canvas MathML?

Web developers and others wishing to confirm the presence of the MathML generated by Canvas can view the code of the published view of the page (i.e. after the page has been saved).

The MathML code is within a SPAN tag below the IMG tag. The MathML code itself is within a SPAN with an ID referring to "MathJax Element" within the attribute data-mathml.

Input LaTeX in Math Editor

If you are accustomed to working with LaTeX, the Advanced View of the Canvas Math Editor lets you edit directly in LaTeX. The LaTeX is converted to a Canvas equation with the accessible features listed above..

The following equation editors supported at Penn State allow users to create LaTeX in a WYSIWYG equation editor, then copy and post the LaTeX code into the Canvas equation editor.

• EquatIO
• MathType

LaTeX syntax can be learned from these sources:

• Canvas Math Editor Advanced View (PDF)
• LaTeX Wikibooks

MathML Options in Canvas

Using MathML Code in Canvas Pages

Penn State has added code to support MathJax and MathML within the university’s version of Canvas.

That means you can add MathML code directly into the HTML Editor view of the Rich Content Editor in Canvas Pages, and it will display properly in most browsers and mobile devices including those using Google Chrome.

Note: Expanded MathJax support is a customization implemented at Penn State. This functionality may not be available in other instances of Canvas outside Penn State.

Upload HTML File with MathML

Another option is to upload an HTML file with Embedded MathML into the Files area.

Link to MathML Content

A third is to link out to content with MathML hosted outside of Canvas such as on Sites at Penn State or Drupal.

Convert Between LaTex and MathML

If you need to convert between LaTeX and MathML for any reason, the free Wiris MathML/LaTeX demo and the application MathType have conversion utilities.

Note: This conversion is NOT supported by the Microsoft Equation editor.