MathJax 3 in Angular 13 WCAG compliant...?

17 views
Skip to first unread message

Doug Holubek

unread,
Dec 28, 2021, 8:45:03 PM12/28/21
to MathJax Users
I'm trying to get MathJax working in Angular 13.  I included the js my index.html like this

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

In order to render math expressions in the templates it seems I had to first load it as a string in a variable in the component class then interpolate that variable in the template like this (it seems that the attribute ngNonBindable didn't work for this string)

some.component.ts
meh: string = 'When \\[a \\ne 0\\], there are two solutions to \\[ax^2 + bx + c = 0\\] and they are \\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]';

some.template.html
<p>{{meh}}</p>

When I flip on Mac OS's Accessibility Voice Over it doesn't understand the math equations. It refers to it as an unlabeled image.
I'm wondering if I'm doing something wrong, Mac OS Accessibility and MathJax don't play well together or
MathJax 3 with Angular templates aren't allowing the screenreader to do its job...

Any thoughts???
Screen Shot 2021-12-28 at 8.34.58 PM.png
Reply all
Reply to author
Forward
0 new messages