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

【问题标题】：Make Screenreader read messages on get-request让屏幕阅读器在获取请求时阅读消息
【发布时间】：2016-08-10 15:53:59
【问题描述】：

我尝试在我们的在线应用程序中为具有屏幕阅读器的用户提供可访问性，其中错误/警告/信息消息对于使用非常重要。

如果我通过 ajax 添加消息，则 aria-live 和 role="alert" 属性效果很好。首先读取消息，然后读取其他元素。

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

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

【问题讨论】：

【解决方案1】：

当消息被用户采取的任何操作更新时，将焦点发送到消息。您可以使用链接执行此操作，例如<a href=#messages> 用于<div id=messages tabindex=0>，或使用您的脚本。如果您的消息已经在可聚焦元素中，您可能不需要 tabindex。

【讨论】：

此外，如果您使用 tabindex=-1，您可以通过编程将焦点设置到元素，例如
然后用正文设置焦点 onload: document.getElementById('errors').focus();这会将焦点设置为错误，但它们不会像 tabindex=0 那样以焦点顺序出现
我认为将焦点设置到其他元素并不是最好的方法，因为焦点不应该受到影响，这是一种非预期的行为。
如果在用户采取了操作（例如单击链接或提交按钮）时发生移动焦点，则很好。如果您在没有用户输入的情况下执行此操作，这只是一个问题。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我添加了一个带有 role="alert" 的额外（隐藏）区域，并使用 javascript 对其进行了更新。这样我得到了最好的结果，即在 POST (ajax) 和 GET 请求上读取消息。

【讨论】：