Creating accessible math content

At Learnosity, accessibility is a priority. This includes the tools we provide for creating content such as math equations. Ensuring math content is accessible in the Learnosity APIs has been a focus area for many years, and we continue to invest in this area.

We learned that accessible online math is difficult, and a problem no one has solved comprehensively. This information came from an independent accessibility audit and discussions with the math accessibility community. Technology solutions are one way that accessibility users can access online content, another is Individual Education Plans / Programs (IEPs) for users. 

As part of these plans, education institutions and users need to ensure they can engage with the educational content being delivered. This can take the form of negotiated needs and identified solutions outside of the technology. When it comes to online math, IEPs play a large part to bridge the existing gaps in technology solutions.

Learnosity continues to watch advancements in technology for accessibility. We remain devoted to improving our technology in this domain, offering user choices for accessibility wherever possible. We intend to use our knowledge and experience to offer not only full accessibility in the math space, but also the best accessible user experience.


Technology solutions for math content

Learnosity math content can be rendered in a number of ways. Math can be rendered in a static form, for example math in a Question stimulus or Question distractor content. Math can also be dynamically rendered within the response fields of math Question types when using the formula keypad.


Static math content

The MathJax library is used in the Learnosity APIs to render static math and we leverage its built in assistive MathML feature. Static math content added to the page contains visibly hidden MathML that is identifiable by assistive technology and the math spoken to the user accordingly. Using the assistive MathML assistive technology in non English languages will read the MathML in the required language.


Dynamically rendered math content

When end users enter math symbols via the keypad in math response Questions, Learnosity uses the proprietary spokenmath to dynamically generate assistive content as the user types. Our keypad produces content marked up in the LaTeX markup language. As each symbol is entered, the LaTeX is converted to plain text and updated to an ARIA live announcement giving the user a spoken indication of what they have entered.

This is not the only place in the Learnosity APIs where spokenmath is used, there are two other cases, client customisation of math labels and automated generation of some Question type distractors.



Figure 1: Dynamically generating spokenmath on user input


Customizing math labels

Within the Learnosity authoring environment, all math input using the Learnosity math keypad has an option to Edit ARIA label for the math. When this checkbox is selected, a field is exposed where clients can input a custom label for the math. The field is populated by default using a spokenmath label. However, this can be edited as needed. This text label is saved with the Question and added to the page when the Question is loaded. This replaces the MathJax assistive MathML and is treated like any ARIA label by the assistive technology.



Figure 2: ARIA Label editing within stimulus math input


Aria label response.png

Figure 3: ARIA Label editing within math Question validation


Issues with automated math generation

When math is used as the only content within a Question distractor, such as MCQ (Multiple Choice Questions) we have encountered an issue with how the MathJax assistive MathML is handled by accessibility APIs in web browsers. 

The assistive MathML is nested from the interactive element (e.g. radio buttons in MCQ). In plain terms, this means the assistive MathML for that math is not seen by screen readers when navigating in ‘forms’ mode (tabbing) so the math label is not read with the associated radio button. The assistive MathML can be reached when using screen reader reading mode, however that is not always intuitive for the expectation of interactive elements such as radio buttons. 

In order to get around this we use spokenmath to generate a plain text label for the math and associate that with the interactive elements label. 

Although this solution solves the missing label in screen reader forms mode navigation there is an issue when it comes to non English use of the Learnosity APIs. To date there is no ability to customize, or Label bundle spokenmath for non English languages and these labels are always generated in English. If the client product is being versioned in non English languages, then we recommend following the Client customisation of math labels approach above and adding the non English label for the math in authoring to ensure that the user will receive the correct language reading of the math.


Disabling spokenmath

Implementing spokenmath was particularly successful in improving accessibility of our user inputs in math Question types. It is well-loved by clients and works well to give assistive users instant and dynamically updated feedback on what they are inputting. 

However, despite all of our best intentions to help assistive users, spokenmath does not work for all clients or all math end users. 

Feedback from the math accessibility community has highlighted that the spokenmath text string is read like any ARIA label, as a continuous announcement. For younger level math users, this can be fine as the expressions are simpler and shorter. As screen reader users cannot use standard reading controls such as pause, or 'read word by word', it can be difficult when interpreting more complex expressions. 

Unlike assistive MathML, the user is unable to target specific aspects of an expression for better comprehension or understanding. Instead they can only listen to the whole expression as a text string from start to end.

Spokenmath is enabled by default however where clients may prefer not to leverage spoken math, Learnosity offers two configurations to disable spokenmath.

These configurations allow clients to decide if they want to use spokenmath. But they are also needed when using Learnosity with non English languages, as spokenmath only generates English text.

NOTE: Once the setting is disabled, assistive users will not hear the math announced in screen reader forms mode navigation. See the Client customisation of math labels section above for guidance on how to add custom labels for math to ensure assistive users hear a label on the form element. Additionally, the user response inputs will no longer read the math being input.



Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.