presentational element is exposed to assistive technologies

StephDriver commented 5 months ago

This is about MathJax elements and whether they are correctly displaying to screenreaders. It is going to need testing with a screenreader to distinguish whether this is incorrect use of MathJax, or site improve (which flagged this) doesn't understand MathJax.

the key question is whether role=presentation is correct here, as used to hide decorative elements from screenreaders. amd whether a screen-reader friendly alternative is being correctly specified.

example: https://www.iastatedigitalpress.com/mmb/article/id/12562/

<span class="inline-formula mathml">
<span class="MathJax_Preview" style="color: inherit; display: none;"></span>
<span id="MathJax-Element-1-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" data-mathml="<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mi>R</mi><mo stretchy="false">(</mo><mi>&#x3BB;</mi><mo stretchy="false">)</mo></mrow></math>" role="presentation" style="font-size: 103%; position: relative;">
<span id="MJXc-Node-1" class="mjx-math" aria-hidden="true">  </span>
<span class="MJX_Assistive_MathML" role="presentation">  </span>
</span>
<script type="math/mml" id="MathJax-Element-1">  </script>
</span>
</span>

ajrbyers commented 3 months ago

@StephDriver to investigate whether screen readers will ignore the MathJax in favour of the MathML.

StephDriver commented 2 months ago

Background

Some browsers have native support for MathML, but not all. MathJax using MathML itself as its internal format, so what MathJax is doing is ensuring MathML renders regardless of browser native support - and that it is rendered consistently regardless of browser. MathML Support in MathJax Docs

So the question becomes how do screenreaders handle MathJax.

Screenreader compatibility was included via AssistiveMML extension in MathJax v 2.6.

Screenreader compatibility. The new AssistiveMML extension enables compatibility with most MathML-capable screenreaders by inserting visually-hidden MathML alongside MathJax’s visual output. See screenreader support for details on the expected behavior as well as background on the limitations due to lack of web standards and browser/OS technology.

Screen reader support

Some screen readers support MathML, MathJax’s internal format. Screenreaders like ChromeVox, JAWS (on IE), and TextHelp support MathJax directly (most only version 2); other screenreaders are supported by the assistive-mml extension as of version 3.0.1.

Testing with Mac Voiceover

from page listed at top of issue. Expected reading something along the lines of "K over S, bracket lambda bracket"

<span class="inline-formula">
    <span class="inline-formula mathml">
        <span class="MathJax_Preview" style="color: inherit; display: none;">
        </span>
        <span id="MathJax-Element-10-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;><mrow><mfrac><mi>K</mi><mi>S</mi></mfrac><mo stretchy=&quot;false&quot;>(</mo><mi>&amp;#x3BB;</mi><mo stretchy=&quot;false&quot;>)</mo></mrow></math>" role="presentation" style="font-size: 123%; position: relative;">
                        <span id="MJXc-Node-97" class="mjx-math" aria-hidden="true"><span id="MJXc-Node-98" class="mjx-mrow">
                        <span id="MJXc-Node-99" class="mjx-mrow"><span id="MJXc-Node-100" class="mjx-mfrac">
                        <span class="mjx-box MJXc-stacked" style="width: 0.77em; padding: 0px 0.12em;">
                        <span class="mjx-numerator" style="font-size: 70.7%; width: 1.089em; top: -1.342em;">
                        <span id="MJXc-Node-101" class="mjx-mi" style="">
                        <span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.485em; padding-bottom: 0.304em; padding-right: 0.04em;">K</span>
                        </span>
                    </span>
                    <span class="mjx-denominator" style="font-size: 70.7%; width: 1.089em; bottom: -0.679em;">
                        <span id="MJXc-Node-102" class="mjx-mi" style="">
                            <span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.485em; padding-bottom: 0.304em; padding-right: 0.032em;">S</span>
                            </span>
                        </span>
                        <span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.288em; width: 0.77em;">
                        </span>
                    </span>
                    <span class="mjx-vsize" style="height: 1.429em; vertical-align: -0.48em;"></span>
                </span>
                <span id="MJXc-Node-103" class="mjx-mo">
                    <span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.485em; padding-bottom: 0.605em;">(</span>
                    </span>
                    <span id="MJXc-Node-104" class="mjx-mi">
                        <span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.485em; padding-bottom: 0.304em;">λ</span>
                    </span>
                    <span id="MJXc-Node-105" class="mjx-mo">
                        <span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.485em; padding-bottom: 0.605em;">)</span>
                    </span>
                </span>
            </span>
        </span>
        <span class="MJX_Assistive_MathML" role="presentation">
            <math xmlns="http://www.w3.org/1998/Math/MathML">
                    <mrow>
                        <mfrac>
                            <mi>K</mi>
                            <mi>S</mi>
                        </mfrac>
                        <mo stretchy="false">(</mo>
                        <mi>λ</mi> 
                        <mo stretchy="false">)</mo>
                    </mrow>
                </math>
            </span>
        </span>
        <script type="math/mml" id="MathJax-Element-10"> 
            <math>
                <mml:mrow xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <mml:mfrac>
                        <mml:mi>K</mml:mi>
                        <mml:mi>S</mml:mi> 
                    </mml:mfrac> 
                    <mml:mo stretchy="false">(</mml:mo>
                    <mml:mi>λ</mml:mi>
                    <mml:mo stretchy="false">)</mml:mo>
                </mml:mrow>
            </math>
        </script>
    </span>
</span>

Test: Voice over reading the element in passing

Fraction start, K over S, end of fraction. Left parenthesis. Right parenthesis.

Test: And going into the element

In maths. Fraction start, K over S, end of fraction. Left parenthesis. Right parenthesis. with 2 items. Maths.

Test: with 'speak selection' - this doesn't look at the HTML.

KS Lambda

Observation

The screenreader does not read the lambda symbol, and doesn't even acknowledge its existance. This fundamentally changes the equation being read out! The lambda symbol is not hte problem it is read when just looking at hte screen, but when the screen-reader is accessing the markup, it doesn't seem to be aware of the lambda.

Conclusion

elements are being presented in a way that doesn't seem to be picked up by voice-over. Investigation to compare this code to some that does work is needed.

StephDriver commented 2 months ago

blocked: upcoming session on screen-reader accessible maths this month, which may bring insights.

StephDriver commented 1 month ago

Digging further into MathJax and MathML

was directed to a good example journal, but found they had same issue as us, voice over does not read the Greek letters in equations.
Looked through documentation. Greek letters in both us & example are being specified in unicode. Tried writing them in format described on https://www.javatpoint.com/mathml-greek-letters-symbols but still not read out (displays correctly).

Next - keep looking at how to resolve this.

BirkbeckCTP / janeway