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

Question

我有这部分代码：

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

问题是，我希望JAWS读取aria标签"This is other title example"的文本，但在标题列表中，我只希望看到span文本"title example"。

我使用role="text"，这在Chrome中可以很好地工作，但在IE中不行。Chrome和IE中是否有正确的请求结构(在标题列表中，我只想看到文本"标题示例"，但当我使用JAWS导航时，标题发音必须是aria标签"这是另一个标题示例"(？

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和arialevel=5
• 带有role=text是无用的，因为h5标记中的内容被认为是有文本的

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