aria-labelledby 不适用于 NVDA/Firefox

Question

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

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

问题是屏幕阅读器无法读取上标或减号。

为了解决这个问题，我添加了aria-labelledby一个自定义描述：

<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 不起作用。它只是忽略它。

我尝试过使用aria-labelandaria-describedby但似乎不起作用。提前致谢。

Answer 1

浏览器/屏幕阅读器组合应忽略aria-label和/aria-labelledby或<span>. 您可以在此处详细了解哪些具有这些属性的元素在哪些组合中受到支持：用户代理的 ARIA 支持

相反，你最好的选择可能是使用离屏技术。首先，CSS 在视觉上隐藏某个内容，但仍将其保留在页面中以供屏幕阅读器使用：

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

然后你可以将你的替代方案放入 a 中<span class="visually-hidden">，没有人会看到它。然后，您不希望屏幕阅读器朗读的部分会得到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>

那应该适合你。