Forum Discussion
AnnieKim18
3 months agoStaff
Looking for examples of alt text for math equations
Hi everyone, the Storyline team is currently exploring ways to support math equations and we've heard from several customers that accessibility, specifically screen reader support, is very important....
SamHill
3 months agoSuper Hero
We have used MathJax using the following method:
Loading the script from the CDN (or local file) in the Slide Master when timeline starts
function loadMathJax() {
const script = document.createElement('script');
script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
script.async = true;
// Find the last script in the head
const lastScript = document.head.getElementsByTagName('script');
const lastScriptElement = lastScript[lastScript.length - 1];
// Insert the new script after the last script
if (lastScriptElement) {
lastScriptElement.parentNode.insertBefore(script, lastScriptElement.nextSibling);
} else {
document.head.appendChild(script);
}
// set loaded flag;
window.MathJaxLoaded = true;
}
if(typeof window.MathJaxLoaded === "undefined") loadMathJax();
And then defining the equations like this on screen:
And the ALT text value of this equation would use the special syntax for the MathJax library:
Due to how Storyline creates the ALT text, actually works in the favour of the library, as Storyline places an aria-hidden on the element, and copies the content of the ALT text value to a new DIV container which is then processed by MathJax, which results in an accessible version of the equation:
<mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" display="true" tabindex="0" ctxtmenu_counter="0" style="font-size: 114.6%; position: relative;">
<mjx-math display="true" class="MJX-TEX" aria-hidden="true" style="margin-left: 0px; margin-right: 0px;">
<mjx-msup>
<mjx-mi class="mjx-i">
<mjx-c class="mjx-c1D44E TEX-I"></mjx-c>
</mjx-mi>
<mjx-script style="vertical-align: 0.413em;">
<mjx-mn class="mjx-n" size="s">
<mjx-c class="mjx-c32"></mjx-c>
</mjx-mn>
</mjx-script>
</mjx-msup>
<mjx-mo class="mjx-n" space="3">
<mjx-c class="mjx-c2B"></mjx-c>
</mjx-mo>
<mjx-msup space="3">
<mjx-mi class="mjx-i">
<mjx-c class="mjx-c1D44F TEX-I"></mjx-c>
</mjx-mi>
<mjx-script style="vertical-align: 0.413em;">
<mjx-mn class="mjx-n" size="s">
<mjx-c class="mjx-c32"></mjx-c>
</mjx-mn>
</mjx-script>
</mjx-msup>
<mjx-mo class="mjx-n" space="4">
<mjx-c class="mjx-c3D"></mjx-c>
</mjx-mo>
<mjx-msup space="4">
<mjx-mi class="mjx-i">
<mjx-c class="mjx-c1D450 TEX-I"></mjx-c>
</mjx-mi>
<mjx-script style="vertical-align: 0.413em;">
<mjx-mn class="mjx-n" size="s">
<mjx-c class="mjx-c32"></mjx-c>
</mjx-mn>
</mjx-script>
</mjx-msup>
</mjx-math>
<mjx-assistive-mml unselectable="on" display="block">
<math
xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</math>
</mjx-assistive-mml>
</mjx-container>