标准 · WCAG 2.2

SC 3.3.1 级别 A WCAG 2.0

错误识别

当系统自动检测到用户的表单错误时,必须以文本形式向用户标识并描述该错误——不能仅靠颜色、仅靠图标,也不能保持沉默。

要求内容

如果表单输入无效(格式错误、缺少必填值、超出范围)且系统自动检测到该情况,则必须以文本描述的方式向用户标识错误。文本必须说明哪个字段有误以及错误原因——而不仅仅是”出现了问题”。

本成功准则并不要求系统检测所有可能的错误;它要求已检测到的错误以文本形式呈现给用户。

如何满足

  • 为每个表单字段配备一条可见的错误消息,描述具体问题,并将其置于字段旁边或下方。
  • 在错误消息中明确指出出错字段的名称,例如:“电子邮件地址必须包含 @ 符号。”
  • 使用 aria-describedby 将错误消息与输入框关联,以便屏幕阅读器在聚焦时宣读该消息。
  • 在无效输入框上设置 aria-invalid="true"
  • 对于服务器端验证,在表单顶部呈现错误摘要列表,每个条目链接至对应的出错字段。
  • 通过实时区域(aria-live="polite"role="alert")宣告动态验证消息,使屏幕阅读器无需用户主动查找即可获知错误。

常见失败

  • 对无效字段仅显示红色边框,无任何文字说明。
  • 通用横幅提示”表单无效”,却未指明具体是哪些字段出错。
  • 仅在工具提示中显示错误消息,且失焦后随即消失。
  • 单独使用浏览器原生验证(requiredpattern)——浏览器气泡提示对屏幕阅读器不可靠,且消失过快。
  • 仅使用行内图标(红色感叹号)作为错误指示器,而无可访问名称。

重要性

这是审计中最常见的输入辅助失败项。对于视力正常的用户,红色边框至少能提供一点提示;而对于屏幕阅读器用户而言,这与什么都没有无异。对于色觉障碍用户,单纯的红色边框根本无法传达任何信息。如果用户费力填完一长串表单后提交失败却毫无反馈,他们很可能就此放弃——而无障碍问题正是他们遭遇这一困境的根本原因。

将成功准则 3.3.1 与 3.3.3(错误建议)和 4.1.3(状态消息)配合使用——三者共同构成现代表单错误处理模式。