aria role=alert 用于每个验证错误
aria role=alert used for each validation error
我的代码会为每个无效的表单字段生成内联验证错误，例如
<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>
如果我有多个元素，屏幕 reader 只会读取第一个验证错误。
有没有办法让屏幕reader读取每个元素？
理论上，当带有 aria-live=assertive 的元素出现或被修改时，它会使屏幕 reader 立即读取它，中断当前正在其他地方读取的任何内容。
相反，aria-live=polite 告诉屏幕 reader 在不中断任何内容的情况下阅读内容。
这隐含地暗示，如果有多个 aria-live=assertive appearing/being 同时修改或修改得太快，则只有一个会被完全读取（一个 aria-live=assertive 也会中断另一个） .
其他人会立即被打断，你无法知道最后会读到哪一个；它不一定总是第一个或最后一个。
知道这一点，如果我们假设理论总是正确的，我会建议尝试用礼貌代替自信。
然而，实际情况要比这复杂得多：众所周知，某些屏幕 reader 的 and/or 浏览器绝对不遵循这一理论。
您将不得不在您在这里提出的问题与某些屏幕 readers and/or 浏览器不会阅读所有内容或如果您没有使用正确组合的情况下根本不会阅读任何内容这一事实之间做出妥协角色+aria-live+aria-relevant+aria-atomic 属性。
找到最令人满意的解决方案的最好方法是测试自己...
实际上，我认为您的问题可能是不太糟糕的解决方案之一（在这种情况下，说出一些东西当然更好，即使不是全部，也比什么都不说）。也许最终保持原样并没有那么糟糕，只要用户在浏览不同字段时可以手动访问并阅读所有错误消息。
P.S。删除 aria-hidden=false。它可能没用，我已经观察到有时它的行为就像 aria-hidden=true
aria-live 的assertive 类型不仅会中断用户当前的公告，还会停止屏幕阅读器的当前批次公告。所以它不能按照你计划的方式使用。
您可以使用 aria-live=polite ，但这也很麻烦，并不是真正必要的。对于所有用户来说，一个更好的错误消息设计模式是在错误摘要中包含类似 "there are 3 fields which need to be fixed before you can submit this form" 的内容。您可以在提交时将焦点发送给它，并让用户控制他们如何处理这些信息。
要让屏幕阅读器在用户到达该字段进行更正时（而不是在您检测到错误时）宣布错误，您可以在追加的同时添加一个 aria-describedby="ctrl2-error"错误 div.
Medium 上的 post 中有一些示例：Create simple, accessible web forms。
我的代码会为每个无效的表单字段生成内联验证错误，例如
<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>
如果我有多个元素，屏幕 reader 只会读取第一个验证错误。
有没有办法让屏幕reader读取每个元素？
理论上，当带有 aria-live=assertive 的元素出现或被修改时，它会使屏幕 reader 立即读取它，中断当前正在其他地方读取的任何内容。 相反，aria-live=polite 告诉屏幕 reader 在不中断任何内容的情况下阅读内容。
这隐含地暗示，如果有多个 aria-live=assertive appearing/being 同时修改或修改得太快，则只有一个会被完全读取（一个 aria-live=assertive 也会中断另一个） . 其他人会立即被打断，你无法知道最后会读到哪一个；它不一定总是第一个或最后一个。
知道这一点，如果我们假设理论总是正确的，我会建议尝试用礼貌代替自信。
然而，实际情况要比这复杂得多：众所周知，某些屏幕 reader 的 and/or 浏览器绝对不遵循这一理论。 您将不得不在您在这里提出的问题与某些屏幕 readers and/or 浏览器不会阅读所有内容或如果您没有使用正确组合的情况下根本不会阅读任何内容这一事实之间做出妥协角色+aria-live+aria-relevant+aria-atomic 属性。 找到最令人满意的解决方案的最好方法是测试自己...
实际上，我认为您的问题可能是不太糟糕的解决方案之一（在这种情况下，说出一些东西当然更好，即使不是全部，也比什么都不说）。也许最终保持原样并没有那么糟糕，只要用户在浏览不同字段时可以手动访问并阅读所有错误消息。
P.S。删除 aria-hidden=false。它可能没用，我已经观察到有时它的行为就像 aria-hidden=true
aria-live 的assertive 类型不仅会中断用户当前的公告，还会停止屏幕阅读器的当前批次公告。所以它不能按照你计划的方式使用。
您可以使用 aria-live=polite ，但这也很麻烦，并不是真正必要的。对于所有用户来说，一个更好的错误消息设计模式是在错误摘要中包含类似 "there are 3 fields which need to be fixed before you can submit this form" 的内容。您可以在提交时将焦点发送给它，并让用户控制他们如何处理这些信息。
要让屏幕阅读器在用户到达该字段进行更正时（而不是在您检测到错误时）宣布错误，您可以在追加的同时添加一个 aria-describedby="ctrl2-error"错误 div.
Medium 上的 post 中有一些示例：Create simple, accessible web forms。