How do I provide a text alternative to a plain text equation using HTML and CSS?

Question

I design and build higher education courses on Canvas that often include worked math examples. Faculty are fond of writing these equations out as text instead of using LaTeX or something similar.

For example:

As an all-equity firm, the WACC is equal to its cost of equity (r_u). Therefore we can say:
WACC = (r_u + market risk premium)²
= (5% + 6%)²
= 0.0121%

These courses need to be accessible to screenreaders and the screenreaders should read the equations in natural language wherever possible.

Due to the limitations of the platform, I can only apply CSS by using the style attribute.

In the past, I used span elements with the role of img to apply an aria-label that describes the equation in natural language, and I hid the original text from the screen reader using another span that has aria-hidden set to true.

For example:

<p>
    As an all-equity firm, the firm’s WACC is equal to its cost of equity (r<sub>u</sub>). Therefore we can say:
</p>
<p>
    <span role="img" aria-label="Weighted average cost of capital = open parenthesis, r u + market risk premium, close parenthesis, squared">
        <span aria-hidden="true">WACC = (r<sub>u</sub> + market risk premium)<sup>2</sup></span>
    </span>
</p>

<p style="margin-left: 50px;">
    <span role="img" aria-label="Open parenthesis, 5% plus 6%, close parenthesis, squared">
        <span aria-hidden="true">= (5% + 6%)<sup>2</sup></span>
    </span>
</p>
<p style="margin-left: 50px;">= 0.0121%</p>

The issue here is then that the screenreader is identifying the text as an image, which it is not, but I have yet to find another role that all screenreaders pick up and will read.

A second solution was to simiarly hide the original text from the screenreader using aria-hidden, and then create a 0.1px by 0.1px span that contained the natural language version (which most users won't see), but this feels like a bad solution.

Example:

<p>
    <span aria-hidden="true">WACC = (r<sub>u</sub> + market risk premium)<sup>2</sup></span>
    <span style="position: absolute; right: auto; top: auto; width: 0.1px; height: 0.1px; overflow: hidden;">Weighted average cost of capital = open parenthesis, r u + market risk premium, close parenthesis, squared</span>
</p>

What is the best practice for provilde a "text alternative" to existing text that assistive devices will read instead of the text that most users will see?

Answer 1

Plain text, MathML and alternatives

I'm a blind user myself. It's a very bad idea to replace your equation already in a text form by a special polished version.

Leave the text form of the equation as it is. At first glance, your example looks quite readable with a screen reader as it is now.

If you can, provide a MathML along with the text version, but never remove or alter the original text version, even if that original version is in LaTeX or whatever programming language.

The MathML version is a nice to have. Those who are using a screen reader supporting it will of course have an much easier time understanding the equations. But there are still many screen readers which don't support it, and so you should always leave the text version as well, just in case.

However, if you are originally writing in LaTeX, it can be useful to use a simpler text-based notation, for those who may not be used to LaTeX. There exists several simplified math notations, like ascii math. They are more than sufficient for most equations even at university level.

IF you are using CSS to position elements and if the absence of CSS make your equation unreadable in plain linearized text, only then giving an alternative is really needed. AS already said, prefer using regular math notation in a programming-like style rather than plain English for that alternative.

Keep reading if you want to know why a polished text version is, in fact, bad, and probably worse than the original text version, provided you aren't doing visual arrangements with CSS that makes it unreadable linearly without CSS.

Why equations in plain English is bad

As I have already explained on that question here: Marking signs denoting chemical bonds for assistive technologies

By turning yourself "(" into "open parenthesis" for example, you are creating several problems:

Braille users immediately recognize the single character "(", and is immediately understood as what it means in math in its context. It takes longer for them to read "open parenthesis", and the brain has more work to do to translate from "open parenthesis" in written English into its meaning in math. I don't know if it's very clear, but the cognitive load needed to understand your equation is higher at the end.

It will also possibly prevent specialized software to translate the equation into nemeth braille, which is a braille notation especially made for math and different from the braille normally used to write text. I don't know of such a software myself, but I'm pretty sure it exists or will exist in the future. Don't block it.

Even for non braille readers, equations are almost always read character by character or word by word. Mixing English words with individual letters having only a math meaning can make the equation less understandable, and in any case, it forces again the brain to switch between language area and math area. Additionally, pronunciation dictionary exists and "(" might have been renamed "open parent" or "left parent" for example. If the screen reader says something slightly unexpected, it increases again the cognitive load.

You have a bonus pain if you plan to translate your course into several languages. Alternative texts, description texts and other legends are a common overlook.

For at least all these reasons, replacing equation text written in a programming-like style by a polished version in regular English is a very bad idea.

It's even worse if you use a software to automatically generate plain English from your equation. The result is acceptable for very very simple math involving the four basic operations, but it becomes quickly truly unreadable if you do slightly more advanced math.

Make yourself a small test. Which one is the most understandable ?

open parent x plus one close parent squared equals x squared plus two x plus one

versus:

(x+1)² = x² + 2x + 1

versus:

(x+1)^2 = x^2 + 2x + 1

Final word

As a final word, remember that you, as a perfectly sighted developer / UX designer / accessibility tester, what you expect a screen reader to say or want the screen reader to say in a given situation may not be the same as what a blind person really expects. That's why the most important in accessibility is to always let the concerned people test themselves what has been designed especially for them. It's true not only for math, and not only for blind people.

Answer 2

Technically, this isn't a WCAG issue. Guideline 1.1.1 says that non-text content needs alternative text that provides an equivalent purpose. In your case, the formula is not non-text. It is text, which is sort of the problem. It's read as plain text.

Screen readers have options to read sub- and superscripts but unfortunately, those options are typically not on by default so the user has to change their screen reader settings.

Similar with parentheses. The default "verbosity" setting for screen readers is to not read all punctuation, such as periods, commas, and parenthesis. With periods and commas, you hear a slight pause when the screen reader is talking. With parentheses, you hear a slight inflection or lower voice when the content in the parentheses is read (similar to how you'd hear it in your head as you read it).

However, what you are trying to do, while not required by WCAG, is a great User Experience (UX) topic. I agree with the comment that MathML would be a great solution, although it's not supported by all screen readers.

Your second solution is the general way that that "hidden" text is provided for screen readers. You are correct to set aria-hidden on the text you don't want read and to use CSS to visually "hide" the text for the screen reader. This has been a common practice for over 20 years. Take a look at What is sr-only in Bootstrap 3? for an example of CSS to provide screen reader text. You can also do a search for the "visually-hidden" class and find something similar.

So your second solution would look like this:

<p>
    <span aria-hidden="true">WACC = (r<sub>u</sub> + market risk premium)<sup>2</sup></span>
    <span class="sr-only">Weighted average cost of capital = open parenthesis, r u + market risk premium, close parenthesis, squared</span>
</p>

(Note, in some equations, seeing r_u would be read as "r u" as you have it specified in your question but in other math areas, you would read it as "r sub u". It depends on the topic being discussed.)