aria-labelledby 不适用于 NVDA/Firefox

Question

我需要一些帮助来制作 NVDA 屏幕 reader 阅读我在 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>

问题是屏幕 reader 不读上标和减号。

为了解决这个问题，我添加了 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>

它部分解决了问题（仅语音 Over/MacOS）。但是 Windows/NVDA/Firefox 不起作用。它只是忽略它。

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

Answer 1

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

相反，您最好的选择可能是使用屏幕外技术。首先 CSS 在视觉上隐藏一个东西，但仍然将它留在页面中以供屏幕 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="visually-hidden"> 并且没有人会看到它。然后你不想屏幕 reader 说话的片段得到 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>

这应该适合你。

Answer 2

这里更好的方法是用嵌入在 HTML 中的 MathML 编写方程式，最新版本的 NVDA 和 JAWS 可以使用 MathPlayer 读取这些方程式，也可以通过 VoiceOver 本地读取。考虑到您的简单方程式，其中 none 将难以正确阅读它们，即使在演示文稿 MathML 中手动编码它们也会很快。我建议您熟悉其中的许多编辑器，以使您的 MathML 尽可能完整。

此外，我想澄清或更正@aardrian 的这一说法：

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

这不是真的。根据 ARIA 1.0 spec，aria-label 和 aria-labelledby 属性对任何元素都有效。未经测试，我猜测 NVDA 在计算可访问名称时感到困惑，因为元素包含文本 and/or 有问题的代码使用 <label> 无效。不过，我已经在 <span> 上成功地使用了两者。

aria-labelledby 不适用于 NVDA/Firefox

aria-labelledby not working with NVDA/Firefox

html

accessibility

wai-aria

nvda