如何让 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 'This is another title example'）在 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>

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

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

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