让屏幕阅读器在获取请求时阅读消息

Make Screenreader read messages on get-request

我尝试在我们的在线应用程序中为使用屏幕阅读器的用户提供可访问性,其中 error/warn/info 消息对于使用非常重要。

如果我通过 ajax 添加消息,aria-live 和 role="alert" 属性会发挥很好的作用。首先读取消息,然后读取其他元素。

第二种可能性是,消息呈现在页面上,这是获取请求的结果。然后消息不会被读取,它们是页面内容。因此用户必须导航到此消息,否则他们将无法阅读。

是否有可能在页面加载时读取消息?我尝试使用 JAWS 17 和 IE 11。

当消息因用户执行的任何操作而更新时,将焦点发送到消息。您可以使用 link 来做到这一点,例如<a href=#messages> 用于 <div id=messages tabindex=0>,或使用您的脚本。如果您的消息已经在可聚焦元素中,您可能不需要 tabindex。

除了按照另一个答案中的描述设置焦点之外,在页面标题中包含错误指示也是一个好主意,因为这是用户听到的第一句话。

例如联系我们 - 页面上有 2 个错误

我使用 role="alert" 添加了一个额外的(隐藏)区域,并使用 javascript 更新了它。这样我得到了最好的结果,消息是在 POST (ajax) 和 GET 请求上读取的。