aria-labelledby not working with NVDA/Firefox

Question

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...
  &epsilon;<sub>x</sub> = -200(10<sup>-6</sup>), 
  &epsilon;<sub>y</sub> = 550(10<sup>-6</sup>), 
  &gamma;<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">
    &epsilon;<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.

Answer 1

The better approach here would be to write the equations in MathML embedded in your HTML, which can be read by recent versions of both NVDA and JAWS using MathPlayer, and natively by VoiceOver. Given your simple equations, none of these would have trouble reading them correctly, and even coding them in presentation MathML by hand would be quick. I'd recommend you get familiar with a few of the many editors out there though to make your MathML as complete as possible.

Also, I wanted to clarify or correct this statement by @aardrian:

A browser / screen reader combo should ignore aria-label and/or aria-labelledby on a <span>.

This is not true. The aria-label and aria-labelledby attributes are valid on any element per the ARIA 1.0 spec. Without testing, I'm guessing that NVDA was confused when computing the accessible name because the element contained text and/or the code in question uses <label> invalidly. I've used both on <span> successfully though.

Answer 2

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">
      &epsilon;<sub>x</sub> = -200(10<sup>-6</sup>), 
      ...
    </span>
  <p>

That should do it for you.