Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

Math

Mathematical equations are often expressed in such a way that the styling and positioning of special symbols convey essential information. This graphical presentation is problematic for users with non-graphical browsers.

MathML

MathML is a W3C standard that specifies the relationships between different symnols in an equation using XML. MathML is created with either WYSIWYG tools like the W3C's own Amaya or from other markup like LaTeX with online, servier-side tools like itex2MML.

Browser support of MathML is fairly good, but certain difficulties exist. A MathML representation of an equation helps accessibility but until it is better supported, one should include additional representations as described below.

Example of MathML

<math xmlns="http://www.w3.org/1998/Math/MathML"

  title="Euler's Identity">

  <msup>

    <mi>e</mi>

    <mrow>

      <mi>i</mi>

      <mi>?</mi>

    </mrow>

  </msup>

  <mo>+</mo>

  <mn>1</mn>

  <mo>=</mo>

  <mn>0</mn>

</math>

Equations as Images

Because equations use style and positioning information to convey relationships between symbols, they are often presented as images. A typesetting program like TeX is used to create some intermediate output from a developer-created source which is then converted to an image that may be included in a web resource. For this image to be accessible, the relationships between symbols must be conveyed to non-graphical browser users. One method is to including the image TeX markup in the ALT text. This is acceptable in many cases; however, if the users may not understand TeX markup, or the markup is overly long and confusing, a long text description should be provided. The equation may be broken down into smaller parts; the steps in a proof may be described in prose instead of rewriting the entire equation.

Example of Equations as Images

e^{i\pi} + 1 = 0
<img class="centeredBlock" src="images/eulersidentity.png"

  alt="e^{ipi} + 1 = 0"

  title="Euler's Identity" />