Home
About Project team
About the Toolkit
Basic concepts
Practical tips
Resources

Enhancing accessibility of mathematical equations, tables, and graphs

Table of Contents

Picture24

Introduction

  • Mathematical content, such as equations, formula, and graphs, are often highly visual in nature. The content would often be potentially inaccessible to many people with visual impairment. However, it is possible to make the content more accessible by different techniques and software.
  • In this section, there are some generic and useful resources about accessible presentation of mathematical content, such as equations, formula, and graphs. These resources are not exhaustive or definitive. They may or may not cover the required technical detail for presenting mathematics in accessible ways, such as coding and programming. It would be out of the scope of this Toolkit to go through the large variety of mathematical content in detail.
  • The recommended resources about creating accessible mathematical content would be useful to preservice teachers of mathematics and science subjects for primary schools and secondary schools. It would help equip the preservice teachers with the techniques of creating accessible mathematical content and class activities to cater for the needs of students with disabilities in their teaching practicum and work in the future.
  • Equation editors
    1. Consider the importance of MathML.
    2. Use built-in equation editors in authoring tools.
    3. Be mindful of the use of symbols.
  • Multi-modal presentation
    1. Provide alternative text (“Alt Text”) for graphics.
    2. Use multi-modal presentation of mathematical content.
    3. Use multiple visual cues to present information.
  • Table formatting
    1. Create data tables with header rows.
  • Use of colour
    1. Ensure sufficient colour contrast.
  • Accessibility check
    1. Test content accessibility to assistive technologies.

Equation editors

  • MathML (Mathematical Markup Language) is approved by the World Wide Web Consortium (W3C) as the standard of accessible presentation of mathematics digitally. MathML supports both visual presentation and accessibility to assistive technologies such as screen readers and Braille readers.
    • List of tools for writing MathML. World Wide Web Consortium (W3C) Math Working Group.
  • The DAISY MathML Modular Extension can be used to support accessible mathematical content in digital publications and digital talking books that conform to DAISY (the Digital Accessible Information System), an international standard for the creation, conversion, and validation of accessible digital books around the world.
  • MathML editor example 1: MathJax.
    • An open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in browsers with built-in support for assistive technologies such as screen readers.
    • Allow copying equations into Microsoft Office, LaTeX, and other software.
    • Provide resources for preparing accessible online mathematical content.
    • Documentation of MathJax accessibility features is provided.
  • MathML editor example 2: MathType.
    • Generate text version of the equations or formulas. The text can be used as the Alt Text of the images of the corresponding equations or formulas. Such Alt Text would be accessible to assistive technologies such as screen readers.
    • Read aloud equations for students with learning difficulties or visual impairments to hear.
    • Support navigation within the programme using only keyboard control by the TAB and Shift+TAB keys along with the arrow Users can create or read equations by using keyboard control alone.
    • Documentation of MathType accessibility features is provided.
    • MathType equation editor plug-in for Microsoft Word, Microsoft PowerPoint, Google Docs, and Google Slides enables users to create MathML equations within the documents to make mathematical equations more accessible.
    • Word documents with accessible mathematical content inserted using MathType can be converted to EPUB using WordToEPUB and to DAISY using the SaveAsDAISY add-in for Microsoft Word.
  • References:
  • Insert equations using the built-in equation builder of authoring tools.
  • Do not use the superscripts or subscripts shortcuts along with alphabets to mimic and insert mathematical expressions, such as “x2”. Although “χ2” and “x2” may look similar visually, superscripts or subscripts created in this way may not be recognized as a true part of mathematical equation by assistive technologies.
  • Using Microsoft Word as an example of authoring tools:
    • Do not insert symbols or characters of the equations from the Advanced Symbol
    • Use the Script command in the built-in equation builder to insert superscripts or subscripts in the equations, such as “χ2”.
  • Avoid inserting equations as an image into the document. Images would be potentially inaccessible to assistive technologies. If image must be used, insert alternative text (“Alt Text”) to the image of the equation to make it more accessible to assistive technologies. Provide a more detailed text description of the image of equation if needed.
  • Different assistive technologies may recognize symbols differently.
  • For example, some screen readers may recognize and/or read out the “ – ” symbol differently. Some screen readers may not understand whether the “ – ” symbol represents the meaning or function of “en dash”, “em dash”, “negative”, “minus”, or “hyphen”.
  • Consider spelling out the intended meaning or function of the symbol in text to avoid confusion. For example, write “25% to 50%” instead of “25% – 50%”; and write “A minus” instead of “A-”. Make a remark within the document to indicate the intended meaning or function of the symbols if needed.

Multi-modal presentation

  • Provide alternative text (“Alt Text”) for graphical content in mathematics such as graphs, tables, charts, and images of equations to make it more accessible to assistive technologies.
  • Alternative text (“Alt Text”) concisely describes the content and the purposes of the graphical content in brief phrases or 1-2 sentences.
  • Alt text enables screen reader users to understand graphical content. When screen readers recognize the graphical content with Alt Text, screen readers will read “Image” or “Graphic” followed by reading the associated Alt Text.
  • Sighted users generally do not see the Alt Text. However, when images do not load successfully and/or the browsers block images by default, Alt Text of that image may display to let users know what the image is about. Sighted users would also see the Alt Text under this situation even if they are not using assistive technologies.
  • Do not write detailed and lengthy text description of complex mathematical content as Alt Text. Consider providing the lengthy description separately as text description. It helps every user understand complex mathematical content, not only screen reader users.
  • In general, no need to begin the Alt Text with phrases such as “Picture of…” or “Image of…”
    • When screen readers recognize an image with Alt Text, screen readers will read “Image” or “Graphic” followed by reading the associated Alt Text.
  • Include the informative text embedded within the graphical content in the Alt Text.
  • Be aware that hyperlinks in the Alt Text cannot be activated or presented by link text.
  • Use punctuation such as periods to end the Alt Text. Otherwise, screen readers may mix up the Alt Text and the main body text that follows. It may confuse the users.
  • For any acronym to be read aloud letter-by-letter (such as “I” – “D” – “E” – “A”) instead of as a word (such as “IDEA”), the letters in the acronym may be spaced out (such as “I D E A”) so assistive technologies such as screen readers would read aloud letter-by-letter.
  • Multiple graphical content sharing the same message can be grouped. Provide an overall Alt Text for this entire grouped graphical content.
  • Graphical content that are purely for visual decorative purposes, for formatting purposes (such as stylistic borders), repetitively used, or do not provide meaningful information generally do not require Alt Text.
  • Refer to the following guidelines to know about more examples of writing informative text description of mathematical content.
  • Explore the availability, applicability, and possibility, of developing multi-modal presentation of mathematical contents. It would not only help cater for the diverse needs of students with disabilities, but also provide alternative ways for all students to understand the mathematical content. This approach would echo universal design for learning.
  • An example is Desmos.
    • A graphing tool that could make graphs more accessible to users of screen readers, Braille, and keyboard control.
    • The “audio trace mode (YouTube video)” of Desmos allows users to read and listen to graphs. Changes in the stereo field, pitch, timbre, and a “pop” sound are used to reflect the changes in the independent variable and dependent variable as presented in the curves or waveforms in the graphs.
    • Examples of audio trace for expressions with a graph as directly quoted from the website of Desmos:
      • “When listening to a graph through audio trace, changes in the stereo field reflect the value of the independent variable when it is x, and changes in the pitch reflect the dependent variable. Static will also be heard along with the tone when the dependent variable is less than 0, or by itself if the variable is undefined. In addition, the timbre of the tone changes when the independent variable is less than or greater than 0. A brief “pop” will sound whenever two curves intersect.”
      • “For example, consider the equation for a simple sine curve: y=sin(x). When audio trace is active, notice how the tone being played moves from left to right as x increases, and the tone’s pitch rises and falls as the y-value changes. Observe how the resonance of the tone morphs once it crosses the X-axis, and the static that plays whenever y moves below 0.”
    • The website of Desmos provides examples of screen-reader-friendly class activities about mathematics.
  • Another example is EquatIO.
  • People with colour blindness, low contrast sensitivity, or some visual impairment, may have difficulty distinguishing between certain colours. Therefore, using colour as the only visual cue to convey important information could hinder understanding of the email content.
    • For example, a red “X” and a green “X” are used to represent “Compulsory lecture” and “Optional class” in the table, respectively. However, some users such as people with colour blindness may be unable to differentiate the red “X” and the green “X”. Users who print out the slides in grayscale may also be unable to differentiate the colours.
  • To enhance accessibility, use multiple visual cues to present information to enhance accessibility to wider range of users, especially graphics, tables, and charts, such as colour, pattern fill, line style (e.g., solid, or dotted lines), data labels, text description, and/or legend.
    • Example 1: Use both colour and descriptive text in the table, such as “Compulsory lecture” and “Optional class”, respectively.
    • Example 2: Use colour, pattern, and text labels, to identify each pie section of pie charts. Put the text labels near or directly on the corresponding pie section to enable readers to understand the chart clearly. Do not put all the text labels below the chart.Two sets of pie charts shown in colour and in greyscale. The set that uses colour as the sole visual cue is marked as less accessible, and the set that uses multiple visual cues is marked as more accessible.
  • References: Charts & Accessibility. Pennsylvania State University
    • More examples of using multiple visual cues to present information in a more accessible way.

Table formatting

  • Insert tables using the built-in table builder of the authoring tools.
  • Avoid inserting tables as an image into the document. Images would be potentially inaccessible to assistive technologies. If image must be used, insert alternative text (“Alt Text”) to the image of the tables to make it more accessible to assistive technologies. Provide a more detailed text description of the image of the tables if needed.
  • Do not create tables simply by either combining text boxes and lines; or using TAB key or Spacebar key to align information in rows and columns. These methods may create a visual appearance of a “table”. However, screen readers cannot recognize it as truly a table with meaningful structure of columns and rows. It makes screen readers difficult to understand how to read out the content. The visual appearance of such a “table” may also be distorted if some users magnify the document by increasing the text size.
  • Provide a concise and descriptive caption of the table to facilitate understanding.
  • Always specify the header row of a table.
    • Sighted users may be able to identify row and column headers based on the visual presentation of the table. However, screen readers need the header information to identify rows and columns. Screen readers can further count and read aloud the number of columns and rows. Then, screen readers can read the information in each cell one by one from left to right, and from the top to the bottom.
    • The first row should be the column header. The first column should be the row header.
    • Do not specify header row by manually formatting the cells and texts of the first row, e.g., using bold and larger text. While it may create a visual appearance of “header”, screen readers cannot identify it as truly a header.
  • Keep table rows on the same page. Allowing table rows to be broken across two pages may make users difficult to understand the content, such as people with reading disabilities, people with visual impairment, or screen readers users.
  • Avoid tables with fixed width that may force the content to be of specific size. The text may become small. Magnifier users and mobile phone users may need to scroll horizontally to read the table content.
  • Do not use merged, split, nested, or multiple headings. Use simple tables, if possible.
    • These designs make screen readers lose count of the number of rows and columns and cannot read out meaningful information from the table.
    • Screen readers count the number of columns and rows, locate the header information. Screen readers read the information in each cell one by one from left to right, and from the top to the bottom.
  • Avoid blank cells.
    • Screen readers may assume there is nothing more in the table. It can be confusing.
    • If you include the blank cells on purpose, you may mention the purpose in the Alt Text of the table or the body text to let screen readers understand it.
  • Check the reading order of the table by pressing only the TAB key starting from the top left cell. Assistive technologies such as screen readers read the information in each cell one by one from left to right, and from the top to the bottom. Tables should follow such a logical reading order from left to right, top to bottom.
  • Ensure sufficient colour contrast between the background colour of the table cells and the colour of the text in each cell.

Use of colours

  • Make sure to check colour contrast for mathematical content presentations such as graphs, charts, and tables. Content with sufficient colour contrast is easier for everyone to read. Content without sufficient colour contrast would be inaccessible to some users, particularly:
    • People who are colour blind;
    • People with visual impairment;
    • People viewing the content through monitors in bright sunlight or glare;
    • People viewing the content through a projector display in a well-lit venue.
  • Make use of software applications to check colour contrast. There is a number of colour contrast checkers that are free-of-charge.
    • Colour contrast is checked against the Web Content Accessibility Guidelines (WCAG) using these checkers. Enter the colours of the background and foreground (e.g., text), respectively. These checkers generally allow multiple methods of entering colours, such as the colour picker tool, RGB colour codes, or hex colour codes. The colour picker is particularly useful to users who are unfamiliar with colour codes. Then, the checkers will tell whether this colour combination would fulfil or fail the colour contrast requirements based on the WCAG Guidelines. If it fails, then it might suggest that we need to consider changing the colour of either the background or the foreground colours, or both. Otherwise, this colour combination might not be visually accessible to some readers. After we change the colours, re-do the check, until you get a combination that fulfils the accessibility requirement.
  • Examples of colour contrast checkers that are free-of-charge:
    • WebAIM Contrast Checker: An online checker.
    • WebAIM Link Contrast Checker: An online checker. It helps check the colour contrast between the link text, the surrounding body text, and the background colour.
    • Colour Contrast Analyser (CCA) from TPGi: It needs to be downloaded onto your computer, available for both Windows and Mac. It also provides a Color Blindness Simulator.
    • Adobe Colour Contrast Analyzer: An online checker. You may input the text colour and background colour values or upload a screenshot of your project to pick the colours you want to check for contrast. It will also recommend colours that would give better contrast. In the Accessibility Tools tab of the Adobe Colour Contrast Analyzer, apart from general colour contrast checker, you can choose the Colour Blind Safe Checker to check whether the colour theme or palette would be accessible for people with colour blindness.
  • Check whether the graphs and charts are readable and properly displayed in grayscale. Modify the colours and/or apply alternative solutions (such as adding text annotations) if any parts of the graphs and charts do not present the intended meanings under colour filters. It is useful and important practice because many students would print out course materials as handouts in black-and-white.
    • Examples of colour filters for checking grayscale display:
      • Windows Built-in colour filters: Go to Start > Settings > Ease of Access > Colour Filters. Switch on the toggle for colour filters.
      • Mac Built-in colour filter: Go to Apple menu > System Preferences > Accessibility > Display > Select Colour Filters > Select Enable Colour Filters > Select Grayscale in the dropdown menu. Then the grayscale filter will be applied to the entire screen.
    • Try selecting the other colour filters in the dropdown menu to view the document in simulated colour blindness situations. Fix any parts that do not present the intended meanings under colour filters.
  • Do not use “colour-on-colour” background and text, such as light blue text on dark blue background.
  • Ensure sufficient colour contrast between the background colour of the table cells and the colour of the text in each cell.
  • Ensure sufficient colour contrast between the link text and its surrounding body text. Ensure the colours of the not-yet-visited hyperlinks and visited hyperlinks show sufficient contrast against the background colours, respectively.
  • Avoid overlay text on a busy background.
    • Images usually consist of a wide range of colours. It could be difficult to ensure sufficient contrast between the colours in the background image and the text. It is difficult to read the overlaid text.
  • Examples of increasing the accessibility of the text overlay:
    • Method 1: Insert the text over the plain section of the photo. Ensure sufficient colour contrast between that section and the text.
    • Method 2: Insert a solid background behind the text. Ensure sufficient colour contrast between the solid background and the text.
    • Method 3: Insert a darker overlay to the image to increase the colour contrast between the background and the text.

Images comparing the not-recommended way of overlaying texts over a busy background, and the three more accessible methods to increase the accessibility of text overlay.

Accessibility check

  • Try inviting people with disabilities through university’s student affairs unit, NGOs referral, open recruitment, or personal invitation, to share their user experience and possible alternative solutions to any potential inaccessibility issues.
  • Try different screen readers to test whether the equations, symbols, and characters are supported. For example:
  • Do not rely on the built-in Immersive Reader in Microsoft Word for testing the accessibility of the mathematical equations, symbols, and characters. It may work differently from assistive technologies such as screen readers.
  • Try navigating the content using only a keyboard (e.g., the TAB key only) instead of a mouse. It helps test the keyboard control accessibility.