html - 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-label 和 aria-describedby 但似乎不起作用。 提前致谢。

Answer 1

浏览器/屏幕阅读器组合应该忽略 aria-label和/或 aria-labelledby在 <span> 上.您可以在此处详细了解哪些具有这些属性的元素在哪些组合中受支持:ARIA support by user agent

相反，您最好的选择可能是使用屏幕外技术。首先是 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;
  }

然后你可以把你的选择放入<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>

这应该为您完成。