Forum Discussion

AnnieKim18's avatar
2 months ago

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. But we would like to hear from more users to make sure we deliver something that's actually usable and valuable to you.

 

If you use equations, could you share how you approach alt text for accessibility? Do you use short descriptions, long descriptions, or both? We'd also love to see examples of how you describe specific equations to better understand your process and needs. Your feedback will help shape this feature! 

 

Annie Kim

Product Manager, Storyline

  • We work with equations that can be quite complex and have been using HTML transcripts with equations added in as text alternatives/companions to SCORM files. Having long alt text can be a bit difficult to relisten to when a particular part of the equation cannot be isolated by users. However, I do like the approach of writing alt text to simulate the screen reader experience so that there is a consistency in approach. 

  • SteveGannon's avatar
    SteveGannon
    Community Member

    I would like to see an equation editor whereby we can create the equations natively in Storyline without a cumbersome process of inserting multiple text boxes, locating symbols, drawing lines, etc. For example, if I want to insert a square root symbol, I would like the top bar of the symbol to continue to extend to the right to match the length of the content within it. 

    Being able to create the equations within Storyline would not only save a lot of time from having to first create the equation in another program, and then export it as a graphic and import it into Storyline. As it  is now, if the equation is created and saved using another tool and the exported graphic is raster in nature rather than vector, the visual clarity of the equation imported into Storyline is degraded.

    Next, I would like the Alt-text to be generated automatically. It should be a detailed description of the equation but a description I can edit. When adding Alt-text for equations, I typically add a detailed description for the first occurrence of the equation but then use a short description thereafter.

    In this example...

    ...a detailed description of this equation might be as follows (modified for correct pronunciation by the screen reader):

    Q sub M equals row A C sub zero times the square root of 2 times G sub C P sub G divided by row plus G H sub L

    But the next time the equation appears in the project, the Alt-text I would use would likely just be:

    Equation to determine the liquid release flow rate through a hole in a tank

    I would like the user to be able to navigate to the equation, giving it focus, and have the screen reader read the detailed description, but then allow the user to navigate to each variable and symbol (e.g., "Q-squared," "integral" or "square root") and have just that variable or symbol read aloud. I would like this all to be generated automatically as I create the equation in the equation editor rather than having to create text boxes for each element in the equation.

    Keep in mind that the sample equation above is very basic. In chemistry, engineering and other fields, equations can be incredibly complex. If Storyline allowed us to create the equation directly in the software and have the Alt-text auto-generated, wow, that would be a huge time saver for the developer and a great benefit to end users. 

  • thomaso1's avatar
    thomaso1
    Community Member

    Thank you for focusing on accessibility for math equations! For alt text, I use short descriptions for simple equations and longer ones for complex formulas. For example, for 
    𝑥 =2a−b±b2−4ac
    ​, I'd describe it as "The quadratic formula for solving x." Happy to share more examples if needed!

  • 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>

     

  • Not sure if this will work, but the screen readers I believe can read LaTex syntax. Has anybody tried that?