无障碍表单验证
Accessible Form Validation
我正在尝试在必要时使用 aria 标签使网页易于访问。
当用户按下提交时，我正在使用 jQuery 验证字段并将视觉对象 属性 设置为任何无效字段，并将 aria-invalid 标记设置为 true。
这一切都有效，但通知视障 (VI) 用户表单无效的推荐方式是什么？我真的不想显示警报，所以目前，它在视觉上很明显是无效的，并且设置了 aria 标签，但是除非用户然后返回到无效字段，否则 s/he 不会知道怎么回事了。
你在田野上设置什么样的视觉效果 属性？只是给他们一个红色轮廓？这对视觉用户来说足够了吗？您没有显示与该字段关联的错误消息？
我希望看到某种错误消息，告诉我该字段有什么问题，以便我知道如何更正它。
设置 aria-invalid 是一个好的开始，您询问如何通知屏幕 reader 用户该字段变得无效也很好。如果您 没有 显示任何错误消息，那么您可能应该在 aria-live 区域中有一个视觉上隐藏的 (*) 错误消息，它将处理向屏幕 reader 用户。
(*) 对于视觉上隐藏的文本，请在 "sr-only" class 上进行 google 搜索，或查看 What is sr-only in Bootstrap 3?
<input aria-invalid="true">
<span id="myerror" aria-live="polite" class="sr-only"></span>
当您验证该字段并发现错误时，将新文本插入 "myerror" <span> 屏幕 reader 将宣布它。
但是，如前所述，以视觉方式显示错误消息是很常见的。如果你想这样做，你可以使用相同的 <span aria-live="polite"> 但不要使用 "sr-only" class 这样每个人都可以看到错误消息。然后使用 aria-describedby.
将错误与 <input> 相关联
<input aria-invalid="true" aria-describedby="myerror">
<span id="myerror" aria-live="polite"></span>
看看WCAG success criteria 3.3.1 - Error Identification。它有一些关于如何处理错误的提示。
你也可以看看WebAIM的“Usable and Accessible Form Validation and Error Recovery”
我正在尝试在必要时使用 aria 标签使网页易于访问。
当用户按下提交时，我正在使用 jQuery 验证字段并将视觉对象 属性 设置为任何无效字段，并将 aria-invalid 标记设置为 true。
这一切都有效，但通知视障 (VI) 用户表单无效的推荐方式是什么？我真的不想显示警报，所以目前，它在视觉上很明显是无效的，并且设置了 aria 标签，但是除非用户然后返回到无效字段，否则 s/he 不会知道怎么回事了。
你在田野上设置什么样的视觉效果 属性？只是给他们一个红色轮廓？这对视觉用户来说足够了吗？您没有显示与该字段关联的错误消息？
我希望看到某种错误消息，告诉我该字段有什么问题，以便我知道如何更正它。
设置 aria-invalid 是一个好的开始，您询问如何通知屏幕 reader 用户该字段变得无效也很好。如果您 没有 显示任何错误消息，那么您可能应该在 aria-live 区域中有一个视觉上隐藏的 (*) 错误消息，它将处理向屏幕 reader 用户。
(*) 对于视觉上隐藏的文本，请在 "sr-only" class 上进行 google 搜索，或查看 What is sr-only in Bootstrap 3?
<input aria-invalid="true">
<span id="myerror" aria-live="polite" class="sr-only"></span>
当您验证该字段并发现错误时，将新文本插入 "myerror" <span> 屏幕 reader 将宣布它。
但是，如前所述，以视觉方式显示错误消息是很常见的。如果你想这样做，你可以使用相同的 <span aria-live="polite"> 但不要使用 "sr-only" class 这样每个人都可以看到错误消息。然后使用 aria-describedby.
<input> 相关联
<input aria-invalid="true" aria-describedby="myerror">
<span id="myerror" aria-live="polite"></span>
看看WCAG success criteria 3.3.1 - Error Identification。它有一些关于如何处理错误的提示。
你也可以看看WebAIM的“Usable and Accessible Form Validation and Error Recovery”