前端表单无障碍化实战：WCAG规范落地与键盘可访问性改造

前端表单无障碍化是WCAG合规的底线要求，也是提升转化率的实际手段。视障用户依靠屏幕阅读器操作表单，键盘用户依赖Tab顺序与焦点指示，忽略这两类场景的表单在可用性测试中问题率极高。无障碍改造的核心原则：所有交互可键盘完成、所有输入有程序化标签、所有错误有明确提示。本文按WCAG 2.1 AA标准给出表单改造方案。

表单无障碍化基础规范：语义标签与标签关联

每个输入控件必须有程序化关联的标签。label的for属性指向input的id：

<label for="email">邮箱地址</label>
<input type="email" id="email" name="email"
       autocomplete="email" required />

屏幕阅读器（NVDA、VoiceOver）读取表单时依次播报标签、类型、必填状态，缺失label的输入框会被读作”编辑框”，用户无从判断该填什么。占位符不能替代标签——输入内容后占位符消失，且对比度普遍不足。必填标识不能只靠红色星号（颜色不能作为唯一信息载体），用aria-required或required属性让读屏用户感知。分组表单用fieldset与legend：

<fieldset>
  <legend>收货地址</legend>
  <label for="city">城市</label>
  <input id="city" name="city" />
</fieldset>

键盘可访问性改造：焦点管理与Tab顺序实战

可交互元素必须可聚焦、焦点必须可见。常见问题是自定义组件（div模拟按钮）无法接收键盘焦点，改造方式：

<!-- 错误：div模拟按钮 -->
<div onclick="submit()">提交</div>

<!-- 正确：原生button或补充语义 -->
<button type="submit">提交</button>

<!-- 必须用div时，补全键盘支持 -->
<div role="button" tabindex="0"
     onclick="submit()"
     onkeydown="if(event.key==='Enter'||event.key===' '){submit()}">
  提交
</div>

焦点样式不要删除浏览器默认outline，确需自定义时提供同等强度的替代：

:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

/* 禁止使用 outline:none 而不提供替代 */

模态对话框的焦点陷阱（focus trap）改造：打开时焦点移入弹窗，Tab循环限制在弹窗内，关闭时焦点返回触发元素。原生dialog元素已内置该行为：

const dlg = document.querySelector('dialog');
dlg.showModal();        // 自动焦点陷阱与Esc关闭
dlg.addEventListener('close', () => triggerBtn.focus());

表单错误提示无障碍化：aria-live区域与错误关联

错误提示必须可被屏幕阅读器感知，且与具体控件关联。方案是aria-live区域加aria-describedby：

<label for="phone">手机号</label>
<input id="phone" name="phone" type="tel"
       aria-describedby="phone-error"
       aria-invalid="true" />
<span id="phone-error" class="error-msg" role="alert">
  请输入11位手机号
</span>

<!-- 顶部错误汇总区，读屏即时播报 -->
<div aria-live="assertive" aria-atomic="true" id="form-status">
  表单包含2处错误，请修改后重新提交
</div>

role=”alert”等价于aria-live=”assertive”，内容插入DOM时立即播报。校验时机选择blur或提交时统一校验，禁止输入过程实时报错（每敲一个字母报一次错是灾难性体验）。错误文案写明具体原因与修正方法，”格式错误”不算合格的错误提示。

无障碍化验收测试：自动化工具与人工测试方法

自动化测试覆盖不了大部分WCAG条款，只能作为第一道关。axe-core集成进CI：

import { axe } from 'jest-axe';
test('表单无障碍检测', async () => {
  render(<SignupForm />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

人工测试的最低要求：拔掉鼠标完成整个表单流程（只用Tab、Enter、Space）；用屏幕阅读器走一遍流程（Windows装NVDA，免费），确认每个控件的播报信息完整；灰度测试对比度，正文不低于4.5:1。Lighthouse的无障碍分数低于90分时优先检查表单，它是失分最集中的模块。改造完成后建议邀请真实键盘用户或读屏用户做一轮可用性测试，自动化工具判合规的表单在真实用户手里仍可能存在操作障碍。