I need some help to make NVDA screen reader read a custom description of a math expression I've written in my index.html. The math expression is inside of a sentence. So it looks pretty much like this:
<div>
some text here...
ε<sub>x</sub> = -200(10<sup>-6</sup>),
ε<sub>y</sub> = 550(10<sup>-6</sup>),
γ<sub>xy</sub> = 150(10<sup>-6</sup>)
some more text here...
<div>
The problem is that screen readers do not read the superscripts nor the minus symbols.
To fix this problem I added a aria-labelledby to add a custom description:
<label id="label">Formula description here</label>
<div>
some text here...
<span aria-labelledby="label">
ε<sub>x</sub> = -200(10<sup>-6</sup>),
...
</span>
<div>
It partially fixed the problem (only Voice Over/MacOS). But Windows/NVDA/Firefox does not work. It just ignore it.
I've tried using aria-label and aria-describedby but seems it does not work.
Thanks in advance.
A browser / screen reader combo should ignore aria-label and/or aria-labelledby on a <span>. You can see a bit more about what elements with those attributes are supported in which combinations here: ARIA support by user agent
Instead, your best bet is likely to use an off-screen technique. First the CSS to visually hide a thing but still leave it in the page for screen readers:
.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
Then you can put your alternative into a <span class="visually-hidden"> and nobody will see it. Then the piece you do not want the screen reader to speak gets an aria-hidden:
<p>
some text here...
<span class="visually-hidden">Formula description</span>
<span aria-hidden="true">
ε<sub>x</sub> = -200(10<sup>-6</sup>),
...
</span>
<p>
That should do it for you.