aria-labelledby does not work with NVDA / Firefox

advertisements

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.


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.