2

我需要一些帮助才能让 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但似乎不起作用。提前致谢。

4

2 回答 2

5

浏览器/屏幕阅读器组合应忽略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;
  }

然后你可以把你的替代品放到 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>

那应该为你做。

于 2017-03-31T23:34:52.560 回答
3

这里更好的方法是用嵌入在 HTML 中的 MathML 编写方程，最新版本的 NVDA 和 JAWS 都可以使用 MathPlayer 读取，而 VoiceOver 也可以原生读取。鉴于您的简单方程式，这些方程式都不会在正确阅读它们时出现问题，甚至在演示文稿 MathML 中手动对其进行编码也会很快。我建议您熟悉其中的一些编辑器，以使您的 MathML 尽可能完整。

另外，我想澄清或更正@aardrian 的这个声明：

浏览器/屏幕阅读器组合应忽略aria-label和/或aria-labelledby在<span>.

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

于 2017-04-23T01:10:05.890 回答