2

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

目前我在包含错误的 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 中工作吗？

4

3 回答 3

2

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

于 2016-10-12T08:50:31.243 回答
1

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

于 2018-08-29T11:54:25.777 回答
0

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

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

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

于 2016-10-08T22:36:57.843 回答