Go to Menu
Celebrating 25 Years of Voice! 🎉

How Teachers Can Make STEM More Accessible With MathJax and TTS

As an educator, you want the best for your students. Here’s what you need to know about MathJax and STEM accessibility.

May 29, 2024 by Amy Foxwell
A teacher making STEM more accessible with MathJax and TTS

When someone wants to write a sentence to be published on the web, he or she opens up the text editor of their choice and types the characters one by one. Once that sentence is published online, the rest of the world can read it, either visually or by having a text-to-speech (TTS) program read the words out loud.

But when someone wants to write math expressions to be published online, the process is a bit more complicated. You can only write the simplest of math equations line by line as you would type sentences. The rest are far more complex and require special formatting and characters to convey the intended meaning of the expression.

Not only is writing math online harder than writing plain text, but it’s also far more difficult for TTS engines to read math out loud to users who need audio assistance. The results often come out jumbled and nonsensical, or they don’t come out at all if the TTS program skips right over the complex syntax. This is a huge problem for STEM students with disabilities who need audio assistance with learning.

Enter: MathJax.

We’ll talk more about what MathJax is and what it does in a moment. To start, just understand that it’s a great solution for educators trying to make math more accessible to their visually impaired or neurodiverse students. If you’re a teacher who uses online websites to teach math, here are the details you need to know.

Want to learn more about making STEM topics more accessible?

ReadSpeaker partnered with Learnosity to bring you this helpful webinar.

Register to listen here
Woman in glasses with tablet

Turning MathJax To Voice For STEM Accessibility

What is MathJax?

Designed to make online math problems readable (both visually and by TTS screen readers and web readers), MathJax is a display engine for web browsers that runs on JavaScript. Since most modern browsers run JavaScript programs well, this means MathJax is also easily usable on almost any web browser you’d choose to use—regardless of whether your computer runs on Mac, Windows, Linux, or another operating system.

Some browsers, such as Google Chrome, have only recently updated to support MathML and MathJax. Until January of 2023, MathML—and therefore display engines such as MathJax that use MathML—were not fully supported across the board. If you’ve tried math accessibility options on Chrome in the past and found them lacking support, it’s worthwhile to try again.

Why should you use STEM resources constructed with MathJax in the classroom?

As a teacher, you’ve probably encountered several different types of learners. Some learn by watching, some by hearing, and others have to do a task themselves before they can truly understand how it works. Plus, every once in a while, you may encounter a student with dyslexia or someone who has difficulty seeing.

To compensate for these learning differences, you’ve probably read words and equations aloud even as you’ve written them on the chalkboard. You might occasionally give PowerPoint presentations with a healthy mix of text, images, audio clips, or even video demonstrations. If you teach blind or visually impaired students, you could even provide Braille versions of texts or offer magnification for digital content. In other words, you don’t just pick one teaching method and stick to it all year long and hope all your students benefit equally from the lessons.

Similarly, you can’t ask your students to perform equally well when learning mathematical formulas from a web browser.

If some or all of your lessons come from outside publishers—and especially if many of your students are remote learners who can only practice lessons online—it’s imperative to make sure your STEM content is accessible.

MathJax helps with that in a number of ways. For one thing, it displays math expressions in a standardized way that most STEM students will recognize. You don’t have to worry about odd formatting getting in the way of your students’ learning.

Perhaps more importantly, MathJax has important voice accessibility features. It opens the doors for text-to-speech programs such as ReadSpeaker to read math content out loud. TTS typically requires math to be encoded in a particular way; if it isn’t, the TTS program will have trouble speaking the math expressions aloud.

Since MathJax standardizes math displays in web browsers and from LMS platforms, it makes it much easier for TTS programs to recognize familiar formatting and pronounce expressions correctly.

It does help, however, to use a TTS program that specializes in reading accessible STEM content out loud. Even if your math problems are displayed with MathJax, a program that isn’t meant for STEM and math in particular will still often get confused.

So as an educator, how do you actually use MathJax?

The good news is, you probably won’t have to learn any new syntax or markup languages—unless you want to. Typically, you’ll use the equation editor within your LMS of choice to build your math assignments. You simply type in your WYSIWYG math editor that’s already part of your LMS, and the program does the rest.

When your students use a TTS engine like ReadSpeaker to help them with their work, the program will convert your math equations into MathJax, which can easily be read aloud for students who want audio assistance.

With that said, if you’d like to build your math assignments without the help of an LMS, you can absolutely do that.

Use your MathJax editor to create equations in MathML, ASCIImath, or LaTeX and choose whether to output the result as HTML formatted with CSS or MathML. If your goal is to make your STEM content more accessible to students with diverse learning needs, the ability to output to MathML or LaTeX is useful.

You can learn more about MathML in this post, but to make a long story short, MathML is one of the markdown languages that STEM-capable TTS engines like ReadSpeaker can easily recognize.

If you’re not the one writing the math equations—if, for instance, you simply found a publisher or website you’d like your students to work with—the proliferation and standardization of MathJax is still good news. Since you’re unlikely to send your students a poorly constructed resource, it’s likely that the high-quality math pages you’ve chosen were put together using MathJax. Therefore, they should also be usable by students who need help from assistive technology.

Use MathJax along with a STEM-focused TTS program to put your diverse learners on equal footing.

If you’re a student with low vision, dyslexia, or other diverse learning needs relying on TTS to do your math homework, you’ll notice a big difference between a program that pronounces x3 correctly as “x cubed” or “x to the third power” and a TTS program that doesn’t understand math syntax and says “x three” instead.

One will help you find the correct answer; the other will leave you needlessly confused and put you at a distinct disadvantage compared to the other students in your class.

In cases like this, there’s nothing wrong with the display or the way the math expression was coded into the browser page. MathJax did its job just fine. It’s the text-to-speech program that makes or breaks the quality of the lesson!

When it comes to creating accessible math content, not all TTS engines are created equally. STEM teachers must make sure to choose one that pronounces math expressions and equations correctly—including formatting, characters, and any special notations the student needs to know.

For instance, listen to how ReadSpeaker is capable of reading the formula for the cosine of the sum of angles in a way that allows students to follow along, pause, rewind, and re-listen at their own pace:

Another TTS program that wasn’t coded to understand math symbols would likely get confused and read the unfamiliar characters wrong—or skip over them entirely. If you’re a student who is following along with the expression written above and your auditory assistance program says something incorrectly, you’d be very confused!

As another example, this is how a STEM-focused TTS reader like ReadSpeaker reads math expressions:

For students with diverse learning needs, the right STEM TTS program can make all the difference!

Ready to make math concepts more accessible to your students?

Struggling to keep up with the rest of the class doesn’t have to be the norm for neurodiverse learners. As a STEM educator, you have the power to bring them up to speed by providing a TTS platform that can help them hear and follow along with complex math problems other web readers can’t handle.

Get a free ReadSpeaker quote here.

Related articles