核心用法
本技能为开发者提供系统化的 Web 无障碍实现方案，严格遵循 WCAG 2.1 AA 标准。核心采用"语义优先"原则：优先使用原生 HTML 元素（button、a、nav、article 等）实现交互功能，仅在语义不足时补充 ARIA 属性。
五大核心流程：
1. 语义化 HTML 选型 — 通过决策树快速确定元素（导航用 <a>、动作用 <button>、分组用 <section>/<article>），避免 div + onClick 的反模式
2. ARIA 按需补充 — 遵循"黄金法则"：HTML 能表达则不使用 ARIA，典型场景包括自定义对话框（role="dialog"）、动态更新区域（aria-live）和表单关联（aria-describedby）
3. 键盘导航实现 — 强制要求 Tab/Shift+Tab 遍历、Enter/Space 激活、方向键组件内导航、Escape 关闭弹窗，并提供完整的焦点陷阱（focus trap）和焦点恢复代码
4. 色彩对比度合规 — 严格执行 WCAG AA 标准：普通文本 4.5:1、大文本/UI 组件 3:1，配套浏览器 DevTools 和 axe 检测方法
5. 表单可访问性 — 禁止使用 placeholder 替代 label，要求所有输入框关联可见标签，错误提示需通过 aria-invalid + aria-describedby 实现屏幕阅读器播报
即用型代码模式包括：无障碍对话框（含焦点陷阱与恢复）、键盘导航标签页、跳转链接（skip link）、表单验证组件。
显著优点
- 标准权威性：直接对接 W3C WCAG 2.1 AA 官方规范，覆盖 12 类常见无障碍缺陷的预防方案
- 开发效率：提供决策树、代码模板、检查清单三位一体，5 分钟可完成基础改造
- 测试完整性：内置键盘-only 测试流程、NVDA/VoiceOver 实操指南、axe DevTools 与 Lighthouse 自动化检测方案
- 框架无关：TypeScript/React 示例可迁移至 Vue/Svelte/原生 JS，无外部依赖
- 预防导向：不仅提供修复代码，更从源头阻断 div 滥用、焦点丢失、色盲依赖等设计隐患
潜在局限
- 学习曲线陡峭：ARIA 属性组合复杂（如 tablist/tab/tabpanel 的 aria-selected/aria-controls 关联），初学者易出错
- 框架生态差异：React 的 useRef/useEffect 焦点管理需适配 Vue 的 ref/onMounted，文档示例偏向 React
- 视觉设计约束：4.5:1 对比度要求可能限制品牌色彩系统，需设计团队配合调整色板
- 动态内容覆盖不全：复杂 WebGL/Canvas 应用、视频播放器、富文本编辑器的无障碍实现需额外专项方案
- 屏幕阅读器碎片化：NVDA、JAWS、VoiceOver 行为差异未完全覆盖，建议用户多设备实测
适合人群
- 前端开发者：需要系统性掌握无障碍开发规范，修复 Lighthouse 低分或客户投诉
- 设计系统维护者：构建组件库时需内置键盘导航、焦点管理、对比度合规的默认行为
- QA/测试工程师：执行 axe 扫描后需要理解报错原因和修复代码
- 技术负责人：推动团队建立无障碍开发流程，制定代码规范与 CI 检测标准
常规风险
- 过度使用 ARIA：违反"优先 HTML"原则可能导致屏幕阅读器播报冗余或冲突信息
- 焦点管理遗漏：SPA 路由切换未重置焦点、对话框关闭未恢复焦点，会造成键盘用户迷失
- 自动化检测盲区：axe/Lighthouse 无法捕获逻辑焦点顺序、实时表单验证播报等交互问题，必须配合人工键盘+屏幕阅读器测试
- 国际化缺失：当前文档以英文示例为主，中文场景需注意 lang="zh-CN" 标注及中文屏幕阅读器适配