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>

那应该为你做。

Answer 2

这里更好的方法是用HTML中嵌入的MathML编写方程式，这可以通过使用MathPlayer的NVDA和JAWS的最新版本以及VoiceOver本身读取。鉴于您的简单方程式，这些方法都不会正确地读取它们，甚至用手工编写MathML也很快。我建议你熟悉一些编辑器，尽可能让你的MathML尽可能完整。

另外，我想澄清或纠正@aardrian的这句话：

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

事实并非如此。 aria-label和aria-labelledby属性对ARIA 1.0 spec的任何元素都有效。在没有测试的情况下，我猜测NVDA在计算可访问名称时感到困惑，因为包含文本和/或相关代码的元素无效地使用<label>。我已经成功地在<span>使用了两者。

aria-labelled不使用NVDA / Firefox

2 个答案: