aria-labelled不使用NVDA / Firefox [英] aria-labelledby not working with NVDA/Firefox

问题描述

我需要一些帮助才能使NVDA屏幕阅读器读取我在index.html中编写的数学表达式的自定义描述。数学表达式在句子内。所以看起来非常像这样：

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.

要解决此问题，我添加了 aria-labelledby 来添加自定义说明：

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>

它部分修复了问题（仅限Voice Over / MacOS）。但Windows / NVDA / Firefox不起作用。它只是忽略它。

It partially fixed the problem (only Voice Over/MacOS). But Windows/NVDA/Firefox does not work. It just ignore it.

我尝试使用 aria-label 和 aria-由描述，但似乎不起作用。
提前致谢。

I've tried using aria-label and aria-describedby but seems it does not work. Thanks in advance.

推荐答案

浏览器/屏幕阅读器组合应忽略 aria-label 和/或 aria-labelledby 在< span> 上。您可以在这里看到更多关于哪些元素支持哪些元素的更多信息： ARIA对用户代理的支持

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

相反，您最好的选择可能是使用屏幕外技术。首先是CSS可视地隐藏一个东西，但仍然留在屏幕阅读器的页面中：

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;
  }

然后你可以把你的替代品放到< span class =visual-hidden> ，没有人会看到它。那么你做的不希望屏幕阅读器发言的部分得到 aria-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>

那应该为你做。

这篇关于aria-labelled不使用NVDA / Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！