在 IE 和 Firefox 中页面刷新后获取要阅读的警报答案

【问题标题】：Getting alerts to read after page refresh in IE and Firefox在 IE 和 Firefox 中页面刷新后获取要阅读的警报
【发布时间】：2016-10-07 19:10:38
【问题描述】：

出于可访问性目的，我需要在页面刷新后立即读取显示的“错误”。

目前我在包含错误的 div 上有 role="alert" 和 tabindex="-1'。这在 Google Chrome 中运行良好，但似乎 IE 或 Firefox 都不支持我所做的。

在 Chrome 中，用户会看到一个包含用户名/密码字段的登录页面。用户“提交”表单而不填写任何信息。页面刷新并显示以下错误，NVDA 立即读取该错误。（我知道实时验证会很好，但这将在稍后完成）

<div id="notification_block">    
<div class="alert alert-danger" role="alert" aria-labelledby="alertHeading" tabindex="-1">  
    <h2 id="alertHeading">Error: Login Failed</h2>  
    <div>Invalid username/password combination. Please verify that your information is correct.</div>  
</div>             
</div>

任何想法如何让它在 IE 和 Firefox 中工作？

【问题讨论】：

标签： html accessibility nvda jaws-screen-reader

【解决方案1】：

我不会使用 role="alert"，而是将焦点设置在页面加载时的 div 上。这将使它可靠地成为将被读出的第一件事，这是一个非常常见的解决方案。

【讨论】：

谢谢。这就是我最终做的事情，它似乎在所有浏览器上都运行良好。
是否有任何 WCAG 标准规定需要明确阅读表单发布后显示的错误，而不是让用户浏览刷新的页面？有适用于动态显示错误（客户端验证）的准则，但我找不到任何措辞可以适用于页面刷新后显示的错误。我倾向于尝试不实施强制焦点更改，因为 WCAG 说不要意外更改焦点。

【解决方案2】：

将 aria 属性 aria-live="assertive" 添加到抛出错误的 div 中。这样，所有屏幕阅读器都将能够阅读所有动态显示的内容。

【讨论】：

如果正在使用role="alert"，则不需要aria-live="assertive"。

【解决方案3】：

使此功能起作用的唯一方法是从本质上延迟将内容插入警报角色，直到页面的所有公告都完成为止。无法以编程方式确定何时发生这种情况，因此您应该：

等待页面加载，
设置超时（比如 500 毫秒）
当超时触发时，将内容插入到警报中

这将增加发布内容的可能性

【讨论】：