internet-explorer - JAWS 使用 IE11 读取页面刷新时的隐藏内容

Question

我有一个表格。提交后，表单被隐藏display:none并在她的位置出现确认消息（将样式从更改display:none为display:block）。没有 AJAX 调用，也没有重新加载页面。确认只是更改显示属性。

JAWS 不阅读确认文本，即使我放在aria-live="assertive"它的容器上。我通过将焦点放在确认消息容器上来让 JAWS 阅读它。但问题是，当我重新加载页面时，JAWS 会再次读取确认消息，即使在页面加载时它具有display:none和aria-hidden="true".

我尝试了在 Stack Overflow 上找到的所有内容：我测试了aria-busy、speak:none、两种类型的aria-live、用 隐藏消息aria-hidden，但没有任何效果。JAWS 在刷新页面时仍会读取确认消息。

由于项目的性质，我无法粘贴代码，但我希望我对问题的描述是可以理解的。

更新：

根据@Josh 的建议，我更新了代码——现在我使用 JavaScript 将错误/确认 div 插入到活动区域。但问题仍然存在。

下面是代码结构：

我将confirmation-status-publish所有.error-status-publisharia

标签： internet-exploreraccessibilityjaws-screen-reader

Answer 1

由于无法查看您的代码发生了什么，我怀疑您可能没有正确使用 aria live 区域。

要使活动区域正常工作，它必须在页面加载时作为具有aria-live或等效role属性的元素出现。通过脚本加载页面后无法添加活动区域，因为它不起作用。

页面加载时 aria live 元素中的任何内容都将被视为页面的一部分，不会以任何特殊方式公布。

仅当通过 JavaScript 将内容动态添加到活动区域时，活动区域才会发出通知。aria-live="polite/assertive"和属性将aria-atomic="true/false"控制其功能的行为。

因此，要使其正常工作，您需要执行以下操作：

在页面加载时：

<div aria-live="assertive" aria-atomic="true">
    <form>
       ... some code
    </form>
<div>

表格提交后：

<div aria-live="assertive" aria-atomic="true">
    <div id="confirmation">
       ... some other code
    </div>
<div>

我鼓励您查看Terrill Thompson Aria Live Region Test Page上的源代码，并使用 JAWS/IE 运行一些测试，以了解它应该如何工作。