技能介绍

要解决的具体问题

AI 辅助前端开发时，人工无障碍测试覆盖有限，事后修复无障碍问题的成本远高于开发阶段就融入。很多团队在组件开发、代码审查时缺乏系统化的无障碍约束，导致 WCAG 2.2 AA 合规要求难以落地，尤其是 React/Vue/Angular 等框架项目的自定义组件常忽略键盘可访问性、ARIA 规范等关键细节。

核心能力与关键步骤

1. 语义化 HTML 优先

用真实 <button> 而非 <div> 做按钮，用 <header>/<main>/<footer> 做页面布局，用 <label> 和 <fieldset> 做表单，保持标题层级逻辑递进（<h1> → <h2> → <h3>，不跳级），优先使用原生元素如 <nav>、<article>、<aside>。

2. ARIA 标签规范

仅在没有原生替代方案时使用 ARIA，使用时记录选择原因；为自定义组件文档化无障碍处理方式（alt 文本策略、焦点管理、屏幕阅读器通知等）；图标必须添加对应 label，视觉专用内容使用 aria-hidden="true"。

3. 键盘可访问性（强制）

所有交互元素必须可通过键盘（Tab/Enter/Space/方向键）操作，保持一致的焦点指示器样式（outline/highlight）；自定义焦点元素仅在必要时使用 tabindex（且只用负值）；触摸目标尺寸满足 WCAG 要求，所有元素易于触达。

4. 色彩对比度与非文本内容

遵循 WCAG 2.x 对比度公式 (L1 + 0.05) / (L2 + 0.05)，普通文本最低 4.5:1，大文本（≥18pt 或粗体 ≥14pt）和非文本 UI 组件最低 3:1，适用于所有颜色状态（正常/hover/focus/disabled）。所有图片提供描述性 alt 文本（装饰性图片用 alt=""），音频/视频提供字幕或文字稿，数据表格使用 <th> 和 scope 属性，避免“点击这里”“继续阅读”等无意义链接文本。

5. 持续维护与验证

每次新增图片/媒体检查 alt 文本，新增颜色验证对比度，保持标题层级逻辑递进；集成 Pa11y 等自动化无障碍测试工具，定期使用 NVDA/VoiceOver 屏幕阅读器手动测试；设置 lang 属性，多语言内容动态切换；实现跳过链接（Skip links）到导航和大型内容组，表单错误清晰传达（不仅靠颜色），避免使用 disabled 状态；尊重 prefers-reduced-motion 媒体查询，视口变化时内容优雅回流。