Creating Accessible Equations and Formulas

Introduction

Making formulas, equations, and scientific notation accessible for mathematics and science is crucial for students with visual impairments and for those who use screen readers.
The biggest challenge is that equations, formulas, and scientific notation are highly visual.
- They use symbols, subscripts, superscripts, and spatial layouts that are hard for a screen reader to describe in a meaningful, linear way.
- When a screen reader tries to read an equation, it may either skip it entirely or read it as a jumble of unrelated characters, making it impossible for the user to understand.

Challenges of using images of text for equations, formulas, and scientific notation

Avoid using images of text to display equations, formulas, and scientific notation unless that is all that you can do based on the digital program that you are using.
Images of text (GIF, JPEG, PNG) are inherently inaccessible.
- They lack the semantic structure needed for screen readers to interpret the important meaning that these images convey.
Require detailed alternative text, but when this is written, it often does not provide a true representation of the equation, formula, or scientific notation.
Images of text can also become pixelated when magnified, making them hard to read for people with visual impairments.
Therefore, a coded equation etc., is always better to use, as we will discuss in a bit.

Importance of providing semantic structure

Semantic Structure refers to the underlying meaning and logical relationships of mathematical and scientific information, separate from their visual appearance.

Prioritize using MathML Core: A World Wide Web Consortium (W3C) specification with support across all major web browsers and most math/science applications. Provides code to render in HTML.
MathML is a recommended standard for coding equations, formulas, and scientific notation because it provides structure and meaning.
It renders a graphical display of equations, formulas, and scientific notation in HTML5 pages.
In other words, MathML makes math and science content accessible by rendering them as a graphical display with the semantic structure necessary for screen readers (like JAWS) to interpret them.
Use a tool like MathType to generate equations in the MathML format, and then use MathJax to render those MathML equations within HTML5 pages.

For further information, here is a video that explains how to work with MathML and HTML5

Accessible Math on the Web: Part 2, The Simple Way with MathML and HTML5 - Greg Kraus, NC State

Using LaTeX

You can also use LaTeX (a system for preparing high-quality documents) for math and science equations, formulas, and scientific notation, but these are rendered as visual elements or specialized characters, with no underlying semantic structure.

To provide semantic information for screen reader users:
- Transform the LaTeX source into HTML using MathJax which reads code and generates two outputs:

A high-quality visual representation of the equation.
An invisible MathML structure, which screen readers can navigate and interpret semantically.

MathML and JAWS screen reader

MathML is Essential for JAWS: JAWS supports formulas across all STEM fields only when they are structured using MathML.
Recent versions of JAWS include a built-in math viewer for recognizing math content, offering natural language descriptions, and enabling detailed navigation of complex equations. Can also work with braille.

Other digital tools

Instructors and students can also create equations, formulas, and scientific notation using Equatio, MyOpenMath, and Google Docs equation editor, with Equatio.

EquatIO

Equatio has an equation editor that accepts diverse input: typing, dictation, and others and converts this into accessible formats.
A screen reader can read the accessible math content aloud with semantic understanding, allowing navigation within the equation structure.
When you insert an equation, EquatIO automatically embeds alt text that screen readers announce to users with visual impairments.
- Check that the alt text properly reads and describes the formula or equation.
- Note: if the alt text generated is more than 120 characters, (screen readers may not read more than that):
  - Will need to place this alt text as a long description adjacent to the formula or equation.

MyOpenMath

MyOpenMath uses technology like MathJax to display equations in a way that screen readers can interpret and read them accurately.
A blind student accesses MyOpenMath primarily through assistive technology, and would need visual content converted to auditory or tactile formats.
Students can enable specific screen reader settings within their MyOpenMath profile to optimize the platform's layout and feedback for their assistive technology.
These students may also use keyboard navigation to move through the interface, enter answers, and interact with problems.

Google Docs equation editor

The built-in Google Docs equation editor does not natively generate MathML that allows screen readers to understand semantic meaning of math or science equations and others.
As a result, when generating an equation, screen readers may only read the equations as a flat string of characters and symbols.
A workaround if you have to use Google Docs instead of an HTML page that renders MathML:
- Use an add-on like EquatIO to generate an image of an equation that is provided with alt text to describe it.
  - Just make sure that the alt text is written in a way that properly describes the equation in the exact way that it is visually displayed.
  - If the alt text is longer than 120 characters, then place it adjacent to the equation.

Graphs, charts, diagrams, illustrations

As a reminder, only use images of text if you really need to.
For graphs, charts, diagrams, and illustrations etc.:
- Place alt text on the image defining what it is. Then state that a long description is adjacent to the image.
- Then provide a long description of a couple of sentences that conveys the following information:
  - What the image is about, explaining any patterns of data.
  - Information a student would need to know for an exam.
  - The context of how this image fits into the overall lesson.
Otherwise, screen reader users will not be able to access the information in the image.
If you already provided this information in the main content, then you don’t need a long description.

Using Google Gemini to generate long descriptions for graphs, charts, etc.

First: go to Google Gemini at https://gemini.google.com/app
Upload an image into the prompt window that you want to have described.
Beneath that type a prompt like: "Describe the key information in this image. What is the information conveyed in the graph, chart, or diagram?
Also type in any background information that will help Gemini write an effective description.
Check the generated text for accuracy, proper context, spelling errors.

Examples of complex images

Chemical element on the periodic table example

When describing a single element from the periodic table, write out the four property labels in narrative form as listed in the periodic table, from top to bottom.
Provide the physical location on the periodic table.

Line graph example

Line graph example
Use a paragraph or bullet points to explain the data and trends logically:

Axis Details: State the X-axis and Y-axis and their units.
Key Trends: Describe the overall story.
Data Points/Values: State specific, important data points.
Multiple Lines: If the graph has multiple lines, describe the trend for each line individually,
and then compare the relationships between the lines.

Line Graph Definition

Bar graph example

Title and Axes: State the chart's title and name the X-axis and Y-axis.
Key Trends: Describe the overall pattern.
Specific Findings: Highlight minimum, maximum, and any significant dips or changes.
Relationships: Explain any relationships focused on in the graph.

What is Vertical Bar Graph - Definition, Examples, Facts

Scatter plot example

State the chart type, title, and name the two variables being compared (X-axis vs. Y-axis), and describe the overall correlation/trend.
Discuss the relationship and pattern of the data points, which is the plot's primary purpose.

How to Make a Scatter Plot: A Comprehensive Guide