表单校验怎样同时服务键盘用户与屏幕阅读器

表单校验要同时照顾键盘用户和屏幕阅读器，关键不是再加一段红色提示，而是把“字段名称、约束、错误原因、修复方法和焦点位置”连成一条可访问的反馈链。原生 HTML 约束负责常见格式，自定义脚本负责跨字段规则；错误状态要写回字段，错误总览要能用键盘跳回对应输入框。

先把字段名称、约束和错误文本连起来

屏幕阅读器需要知道“这是什么字段”和“现在为什么不能提交”。键盘用户则需要看到焦点仍在正确位置，并能通过 Tab 继续移动。一个稳定的起点是：可见 label 指向唯一 id，帮助文字和错误文字拥有独立的 id，输入框再通过 aria-describedby 引用它们。

不要把占位符当作标签，也不要只用绿色或红色区分状态。必填字段可以使用原生 required，邮箱、网址等场景使用合适的 type，让浏览器和辅助技术先获得基础语义。

工作邮箱
用于接收登录通知

错误节点即使初始为空，也可以提前放进文档结构中。脚本只切换文本和可见状态，避免每次校验都重建输入框，导致读屏器失去当前位置。

用原生约束完成第一轮校验

提交事件中先让浏览器约束发挥作用，再处理跨字段规则。checkValidity() 适合读取真假结果，reportValidity() 会触发浏览器的交互式提示；如果要统一错误样式和总览，可以读取字段的 validity，然后自己渲染反馈。不要用 form.submit() 绕过约束，也不要把客户端结果当成安全边界。

const form = document.querySelector('#profile-form');
const email = document.querySelector('#email');

form.addEventListener('submit', (event) => {
  // 先阻止默认跳转，统一收集本次提交的错误。
  event.preventDefault();

  // 浏览器先检查 required、type、minlength 等原生约束。
  const nativeOK = form.checkValidity();
  if (!nativeOK) {
    // 把焦点交给浏览器找到的首个无效控件。
    form.reportValidity();
    return;
  }

  // 跨字段或业务规则放在这里，并继续同步无障碍状态。
  const errors = validateBusinessRules({ email: email.value.trim() });
  renderErrors(errors);
});

原生气泡的文案和样式由浏览器决定，不一定适合所有产品。如果改成自定义提示，必须保留字段关联、键盘焦点和清晰的修复说明；不能仅仅隐藏原生提示再换一条红色文字。

自定义校验要同步状态、文案和焦点

自定义规则通常会检查两个字段是否一致、用户名是否已占用或某个选项是否需要附加信息。校验失败后，输入框应设置 aria-invalid="true"，错误消息要明确说明“哪里错、怎么改”，并通过 aria-describedby 或错误消息属性与字段关联。用户刚打开表单时不要把所有字段预先标红；通常在提交或字段被实际交互后再报告错误。

视觉样式可以用 [aria-invalid="true"] 选择器，但颜色只是附加线索。错误图标旁边仍要有文本，焦点环不能被 outline: none 删除。清除错误时也要同步移除状态、文案和多余的描述引用。

错误总览要能回跳到每个字段

多个字段同时失败时，只在字段旁边放提示会让键盘用户反复寻找，也会让屏幕阅读器用户不知道页面为什么没有提交。可以在表单顶部生成一个简短总览，使用 role="alert" 告知动态变化，并为每一条错误提供指向输入框的普通链接。链接的文字要包含字段名和修复方向，不能只写“点击这里”。

总览出现后，可以把焦点放到总览标题或第一个错误字段，具体选择取决于页面长度和错误数量。总览必须保持可见、可聚焦，并且链接跳转后仍能看到输入框的错误说明。若错误提示只是一句短消息，aria-describedby 很合适；长列表、表格或复杂结构不要把整块内容塞进一个描述引用。

用三条路径复查，不把客户端校验当安全边界

最后一次复查要覆盖成功、空值、格式错误、跨字段冲突和服务端拒绝五种状态。客户端校验可以减少无效请求、改善反馈速度，但用户能够修改页面或手工构造请求，所以权限和数据完整性必须由服务端决定。

常见问题

只设置 aria-invalid 就够了吗？

不够。它表达“当前值无效”，还需要可理解的错误文本、字段关联和修复方法；视觉上也要有不依赖颜色的提示。

错误总览要不要自动抢焦点？

多错误表单通常应该把焦点放到总览或第一处错误，避免用户停留在提交按钮却不知道页面发生了什么；短表单可直接聚焦第一个错误字段。

客户端通过后还要校验吗？

要。浏览器校验是交互辅助，不是安全控制。服务端必须独立检查格式、权限、业务约束和数据一致性。