用户更改后屏幕 Reader 报告 *有效* 输入

Screen Reader reporting of *valid* input after user change

我觉得我一直被这个问题逼疯了,我正在寻找这个想法的更明确的答案,因为我找不到关于这个想法的任何信息。

通常情况下,视力不佳的用户在将无效信息输入表单时会(应该)看到可访问的错误。没问题。

是否有任何方法或先例可以在表单(字段)从先前无效的字段变为有效时向视力不佳的用户报告有效性?

我知道前者通常是通过利用 javascript 构造来操纵 aria-invalid 属性 以在出现错误时向视力不佳的用户显示适当的通知,然后删除一旦错误得到解决。是否成功仅取决于该字段不再出现错误,或者是否应该有一个明确的通知来通知视力不佳的用户,事实上,“是的,该字段是有效的”?

再次感谢

简答

aria-invalid 变为 false 时,大多数屏幕 reader 会宣布这一点,最坏的情况是当输入再次聚焦时他们会宣布这一点。

您无需执行任何其他操作即可告诉屏幕 reader 用户字段有效,因为这是预期的行为。

长答案

您不需要在这里做任何特别的事情,但以正确的方式实施 aria-invalid 很重要。

该字段应该在没有属性的情况下开始,您最不想要的是每个字段在页面加载时为空时都说它无效,因为这会导致混淆。

此外,不要在 必填 字段上使用它来指示它们需要填写,因为这就是 required 属性的用途!

然后当用户键入时,您相应地更新值(因此在第一次按键时添加它,然后在字段有效时更改它,正确时 aria-invalid="true"aria-invalid="false")。

大多数屏幕 reader 会立即宣布对 aria-invalid 的更改,最坏的情况是他们会在字段获得焦点时宣布。

可访问性的关键是预期的行为。如果他们的屏幕 reader 没有实时宣布 aria-invalid 更改,则某些屏幕 reader 用户会重新聚焦字段以检查有效性是预期的行为。有时,当用户感到困惑时,您可能会尝试修复此类问题,从而使可访问性变得更糟。

更重要的是确保有简单的方法可以在用户尝试提交表单时知道表单上存在哪些错误,并使其易于识别和导航到需要更正的字段。

我尽量不偏离手头的问题,但请确保您使用以下技巧:

  • 在表单上拦截 onsubmit 而不是在出现错误时拦截提交按钮按键(因为键盘用户可能会使用 Enter 提交)
  • 使用 aria-decribedby 提供额外信息(以及更有意义的字段错误通知)
  • 将所有错误和错误数量放在表格顶部
  • 首先使用 role="alert"aria-live 宣布错误并解释需要修复的内容。

如果你真的要宣布字段有效

以上建议涵盖了 99% 的场景,但我确信在某个地方存在边缘情况,需要您在某个字段实时有效时宣布。

因此,您应该使用 aria-live 区域并使用当前字段有效性更新它(进行一些节流,这样它就不会淹没公告队列)。

我会选择“名字 - 错误 - 太短”之类的内容并将其更改为“名字 - 正确”或“名字 - 有效”。

正如我所说,我想不出需要这样做的场景,但这就是你可以处理这个问题的方式。