What is the math HTML element?

<math> is an HTML element that allows website editors to add mathematical formulas to their site. This creates math formulas and symbols that are easy to read in the page view. The <math> elements uses specific MathML (Math Markup Language) tags to insert math symbols and formulas onto the webpage. This example adapted from W3c shows how the following formula would be coded using MathML:

x² + 4x =0

<math>
 <mrow>
   <mrow>
     <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo>
     <mrow>
       <mn>4</mn>
       <mo>&InvisibleTimes;</mo>
       <mi>x</mi>
     </mrow>
   </mrow>
   <mo>=</mo>
   <mn>0</mn>
 </mrow>
</math>

Regarding accessibility, we need to look at the semantics and syntax of the formulas. The semantics, or meaning behind the formulas, are not always easy to understand. This can make it difficult for some users to know what the mathematical formula means. For example, someone with a cognitive disability might have trouble remembering what the variables mean in the formula e = mc², so having alternative text to explain the variables could improve the accessibility of mathematical formulas. This could be in the form of a caption or surrounding text that describes the formula.

Syntax, or the arrangement of the symbols in the formula, is easier for web to translate for users. For screen-reader users, JAWS and VoiceOver automatically read <math> elements the way they would be spoken. NVDA does not support <math> elements, but will work the same as JAWS and VoiceOver after installing a math reader like MathPlayer. Testing your code with these screen readers is always helpful in making sure page content is accessible to all users.

To learn more about how AccessibleWeb can help your site be accessible to all users, visit our Usability and UX Testing page.