Web 可访问性表单验证（Accessibility Form Validation）

1. 基本概念：什么是可访问的表单验证

   • 表单验证是检查用户输入是否符合预期格式或规则的过程（例如，必填字段、邮箱格式、密码强度）。
   • 可访问的表单验证 特指以所有用户（包括使用辅助技术，如屏幕阅读器的残障用户）都能感知和理解的方式，来呈现这些验证信息和错误提示。
   • 其核心目标是：当用户输入有误时，不仅要告知“哪里错了”，还要清晰地告知“如何改正”，并且确保这些信息能被辅助技术准确捕获和传达。

2. 验证信息的呈现方式

   • 视觉呈现：错误信息通常以醒目的方式显示在表单项附近，常见做法包括：
     • 使用高对比度的颜色（如红色）来显示错误文本。
     • 在错误表单项周围添加红色边框。
     • 使用图标（如感叹号）来引起视觉注意。
   • 关键注意事项：不能仅依靠颜色来传递信息。对于色盲或视力不佳的用户，必须提供额外的文本或图标作为补充。例如，除了将边框变红，还必须明确写上“此字段为必填项”。

3. 程序化关联与ARIA属性

   • 为了让屏幕阅读器等辅助技术能够识别和播报错误信息，必须将错误信息与对应的表单项在代码层面进行关联。
   • 最常用的技术是使用 WAI-ARIA（无障碍富互联网应用） 属性：
     • aria-invalid：此属性直接设置在出错的输入框上。当验证失败时，将其值设置为 true，明确告知辅助技术此输入值无效。

       <input type="text" id="email" aria-invalid="true">
       

     • aria-describedby：此属性也设置在输入框上，其值指向错误提示信息的元素的 id。这建立了输入框与错误信息之间的描述性关联，屏幕阅读器在聚焦到该输入框时，会一并读出错误信息。

       <input type="text" id="email" aria-invalid="true" aria-describedby="email-error">
       <span id="email-error" class="error-message">请输入有效的电子邮件地址。</span>
       

4. 验证的触发时机与用户体验

   • 验证可以在不同时机触发，各有优劣：
     • 提交时验证：用户点击提交按钮后一次性验证所有字段。优点是减少干扰，但用户可能直到最后才得知错误，体验不佳。
     • 失去焦点时验证：当用户在一个字段中输入完毕并切换到下一个字段时（即 onblur 事件）立即验证。这能提供即时反馈，但可能因用户还在输入过程中而显示过早的错误信息。
     • 实时验证：用户在输入过程中（即 oninput 事件）持续进行验证。能提供最及时的指导，但实现复杂，且频繁的提示可能对屏幕阅读器用户造成干扰。
   • 可访问性最佳实践：对于实时验证，应适当使用 aria-live="polite" 区域。这样，屏幕阅读器会在用户暂停输入时，礼貌地播报验证状态的变化，而不会打断其当前操作。

5. 错误的纠正与焦点管理

   • 当表单提交因验证错误而失败时，应将键盘焦点移动到第一个出错的字段。这允许键盘和屏幕阅读器用户无需手动寻找，就能直接开始纠正错误。
   • 错误信息本身应该是清晰、具体和具有指导性的。避免使用“无效输入”这样的模糊表述，而应使用“密码必须包含至少一个数字和一个特殊符号”这样的具体说明。
   • 如果多个字段有错误，应在页面顶部提供一个错误摘要列表，并包含跳转到各个错误字段的链接。

6. 总结：构建可访问表单验证的完整流程

   1. 检测：通过JavaScript监听相应事件（提交、失去焦点、输入），对表单数据进行校验。
   2. 标记：为验证失败的输入元素添加 aria-invalid="true" 属性。
   3. 关联：使用 aria-describedby 将输入元素与动态生成的错误提示元素关联起来。
   4. 告知：以高对比度的视觉方式显示错误信息，并考虑使用 aria-live 区域进行实时播报。
   5. 引导：在表单提交失败后，将焦点引导至第一个错误处，并提供清晰的纠正指引。