MathML Features

The best way to present math on a webpage is to use mathematical markup language, or MathML. To see why, right-click (or hold Ctrl on a PC or Cmd on a Mac and click) the math content below and see what happens.

  • Math in MathML codeb±b24ac2a
  • Math as an imagescreen shot of the quadratic formula

The options that display when you right-click MathML are explained below.

SUNY's Access MOOC (a massive open online course) has a very nice explanation about why MathML is so important for accessibility (Access Mooc, 2016).

Video 1. Accessible Equations

MathJax

In both Evolution and Canvas, we have a JavaScript display engine called MathJax running in the background. The most important thing to know about MathJax is that it allows equations coded with MathML to display properly in every browser. It also enhances equations with a number of viewing options and accessibility features. 

After adding MathML to a page, checking to see if these options are available is an easy way to verify that the code is working correctly. To do this, add MathML in source/HTML view, save the page, and simply right-click or control-click on the equation. Try it on the equation below:

b±b24ac2a

You should see a menu that includes the following items (Figure 1):

  • Show Math As
  • Math Settings
  • Accessibility
  • Language
  • About MathJax
  • MathJax Help

Figure 1. MathJax Options

Math Settings

The first option, Show Math As, allows you to view the original MathML code used to create the equation. If you need to edit this code, you will have to edit the Evolution or Canvas page in source/HTML view. 

The second option, Math Settings, brings up a submenu that allows the user to configure zoom (magnification) options.


Figure 2. Math Settings

After selecting Hover, Click, or Double-Click, interact with the equation to see it instantly magnify on the page.


Figure 3. Magnified Equation

Accessibility Settings

The menu item Accessibility allows you to configure settings like whether or not the equation is included in the page's tab order. Additional enhancements are available under the Explorer submenu. Using this submenu, you can highlight equations when interacting with them and change verbosity settings for certain screen readers.


Figure 4. Math Accessibility Settings Menu

Finally, the Language option allows you to change the language of the MathJax menu.

These settings are unique to each user, allowing students, faculty, and staff to customize their viewing options to suit their specific needs. This is why using MathML can benefit everyone, not just people who use screen readers.

References

Access MOOC. (2016, January 23). Accessible equations [Video]. https://www.youtube.com/watch?v=BcvKdVX8nS4

 

Updated February, 2020