Themath role indicates that the content represents a mathematical expression.

Description

Content with the rolemath is intended to be marked up in an accessible format such asMathML, or with another type of textual representation, which can be converted to an accessible format by the browser or a polyfill library.

Unfortunately, browser support for MathML is not universal. While using an image of a mathematical expression is not optimal, if you do use image, use themath role.Make sure any images of math are labeled by analt attribute that describes the mathematical expression as it would be spoken.

If the math element has only presentational children and the accessible name is intended to convey the mathematical expression, usearia-label to provide a string that represents the expression. If the math element contains navigable content that conveys the mathematical expression and a visible label for the expression is present, usearia-labelledby. Otherwise, usearia-label to name the expression, e.g.,aria-label="Pythagorean Theorem".

Examples

If you use image or non-semantic HTML to create an equation, use themath role.

The above pythagorean theorem is written accessibly as:

<div role="math" aria-label="a^{2} + b^{2} = c^{2}">  a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></div>

Had an image been used, thealt attribute would be used along with themath role:

<img src="pythagorean_theorem.gif" alt="a^{2} + b^{2} = c^{2}" role="math" />

Specifications

See also

• MathML on MDN and the<math> element (not HTML)
• The MathML specification