aria role=alert 用于每个验证错误答案

【问题标题】：aria role=alert used for each validation erroraria role=alert 用于每个验证错误
【发布时间】：2017-09-26 21:55:29
【问题描述】：

我的代码会为每个无效的表单字段生成内联验证错误，例如

<div>
  <label for="ctrl2">Country of birth</label>
  <input type="text"id="ctrl2" aria-invalid="true" aria-describedby="ctrl2-error" aria-labelledby="ctrl2-error" name="countryOfBirth"><option value=""/>
</div>
<div aria-live="assertive" aria-atomic="true">
  <div id="ctrl2-error" class="form-group" role="alert" aria-hidden="false">
    <ul>
      <li>Country of birth is required.</li>
    </ul>
  </div>
</div>

如果我有多个元素，屏幕阅读器只会读取第一个验证错误。

有没有办法让屏幕阅读器阅读每个元素？

【问题讨论】：

标签： accessibility wai-aria

【解决方案1】：

aria-live 的断言类型不仅会打断用户当前的公告，还会停止屏幕阅读器当前的一批公告。所以它不能按照你计划的方式使用。

您可以使用 aria-live=polite ，但这也很麻烦，并不是真正需要的。对于所有用户来说，更好的错误消息设计模式是有一个错误摘要，您可以在其中说“在提交此表单之前需要修复 3 个字段”。您可以在提交时将焦点发送给它，并让用户控制他们如何处理这些信息。

要让屏幕阅读器在用户到达字段进行更正时（而不是在您检测到错误时）宣布错误，您可以在附加错误的同时添加 aria- describeby="ctrl2-error"分区。

Medium 上的这篇文章中有一些示例：Create simple, accessible web forms。

【讨论】：

【解决方案2】：

理论上，当带有 aria-live=assertive 的元素出现或被修改时，它会使屏幕阅读器立即阅读它，从而中断当前正在其他地方阅读的任何内容。相反，aria-live=polite 告诉屏幕阅读器在不打断任何内容的情况下阅读内容。

这隐含地暗示，如果有多个 aria-live=assertive 同时出现/被修改或修改得太快，则只有一个会被完全读取（一个 aria-live=assertive 也会中断另一个）。其他的会立即被打断，你无法知道最终会读到哪一个；它不一定是第一个或最后一个。

知道了这一点，如果我们假设这个理论总是正确的，我建议尝试用礼貌来代替自信。

然而，现实远比这复杂得多：众所周知，一些屏幕阅读器和/或浏览器绝对不遵循这一理论。如果您没有使用角色+aria-live+ 的正确组合，您将不得不在您在这里提出的问题与某些屏幕阅读器和/或浏览器将无法读取所有内容甚至任何内容的事实之间做出妥协aria-relevant+aria-atomic 属性。找到最令人满意的解决方案的最好方法是测试自己...

实际上，我认为您的问题可能是不太糟糕的解决方案之一（在这种情况下，有话要说当然更好，即使不是全部，也比什么都不说）。也许最终离开并没有那么糟糕，只要用户在浏览不同的字段时可以手动访问并阅读所有错误消息。

附：删除 aria-hidden=false。它可能没用，我已经观察到有时它的行为就像 aria-hidden=true

【讨论】：