如何让 JAWS 读取与屏幕上显示的内容不同的内容

Question

我有这部分代码：

<div role="heading" aria-level="5" >
     <span role="text" aria-label="This is another title example">Title example</span>
</div>

问题是我希望 JAWS 读取 aria 标签的文本“这是另一个标题示例”，但在标题列表中，我只想看到跨度文本“标题示例”。

我使用 role="text"，这在 Chrome 中工作正常，但在 IE 中无效。 是否有正确的结构来满足我的要求（在标题列表中，我只想看到文本“标题示例”，但是当我使用 JAWS 导航时，标题发音必须是 aria-label '这是另一个标题示例'）在 Chrome 和 IE 中？

Answer 1

在回答问题之前，我会解释你做了什么以及错误在哪里。

1. ARIA-LABEL 会覆盖元素的实际文本。在您的示例中，ARIA-LABEL 的值替换了“标题示例”。
2. 如果您想向屏幕阅读器用户显示特定内容，您应该使用称为“仅屏幕阅读器文本”的常用技术。

<div role="heading" aria-level="5" >
<span class="sr-only">This is another </span><span role="text">Title example</span>
</div>

3. 使用 JAWS，标题列表会考虑隐藏的内容，因此您会看到“这是另一个标题示例”
4. "如果您可以使用具有您需要的内置语义和行为的原生 HTML 元素或属性，而不是重新利用元素并添加 ARIA 角色、状态或属性以使其可访问，那么请这样做”。这是 ARIA 的第一条规则。您应该删除所有不必要的 ARIA 属性。

• 元素隐含一个 role=heading 和一个 aria-level=5
• 带有 role=text 是没有用的，因为 h5 标签内的内容被认为有文本

<h5>
<span class="sr-only">This is another </span>Title example     
</h5>