Question

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

<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>

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

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

Answer 1

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

这隐含地意味着，如果有多个aria-live =断言出现/被同时或过快地修改，则只会完全读取一个（aria-live =断言也会中断另一个）。其他人将立即中断，你无法知道哪一个最终会被阅读;它并不总是第一个或最后一个。

知道这一点，如果我们假设理论总是正确的话，我建议尝试用礼貌来取代断言。

然而，现实情况要复杂得多：一些屏幕阅读器和/或浏览器绝对不会遵循这一理论。你必须在这里提出的问题和一些屏幕阅读器和/或浏览器不会阅读所有内容甚至任何事情之间做出妥协，如果你没有使用正确的角色组合+ aria-live +咏叹调相关+咏叹调原子属性。找到最令人满意的解决方案的最佳方法是测试自己......

实际上，我认为你的问题可能是一个不那么糟糕的解决方案（在这种情况下，即使不是所有的东西，也不是一无所有，说话的话肯定会更好）。也许离开，因为它最终并不是那么糟糕，只要用户可以在他经过不同的字段时手动访问和阅读所有错误消息。

P.S。删除aria-hidden = false。它可能是无用的，我已经观察到有时它的行为就好像aria-hidden = true

Answer 2

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

你可以使用aria-live = polite，但这也是非常具有干扰性的，并不是真的有必要。对于所有用户，更好的错误消息设计模式将是一个错误摘要，其中您说的是＆＃34;在您提交此表单之前需要修复3个字段＆＃34;。您可以在提交时将焦点发送给它，让用户控制他们如何处理这些信息。

要让屏幕阅读器在用户到达字段时更新错误（而不是在您检测到错误时），您可以添加aria-describedby =＆＃34; ctrl2-error＆＃34;同时你追加错误div。

这篇文章中有一些例子：Create simple, accessible web forms。

aria role =用于每个验证错误的警报

2 个答案: