屏幕阅读器 - ChromeVox扩展 - 发出所有HTML表单错误，而不只是一个

Question

我很好奇如何阅读填写HTML表单并单击按钮时出现的所有错误。

所有错误 - 例如“请输入您的中间名”，“请输入您的年龄”等都应该发音。

测试了aria-invalid="true"，role="alert"，aria-atomic="true"及其组合。

它根本不起作用或工作正常，但只读取一个错误。我需要发布所有错误。

使用HTML的任何标准方法吗？

这个问题适用于ChromeVox和JAWS。

Answer 1

我相信你所寻找的是ARIA Live Regions。

<form onSubmit="...">
  <input id="username" />
  <span
    aria-live="polite"
    aria-controls="username"
  >Username is required.<span>
  <button type="submit">Submit</button>
</form>

在将错误动态插入元素之前，请确保页面中存在具有aria-live属性的元素。