用途:用于营销落地页的 WCAG 2.2 AA 无障碍整改,覆盖语义结构、颜色对比度、焦点、触控目标尺寸、表单、键盘操作与减少动态效果。不适用于文案、配色与字体选择、页面速度与 SEO、动效内部实现、Next.js 实现或测试工作。
主要能力与规则:优先使用原生语义 HTML(button、a、nav、main、header、footer、label for),而非 ARIA 化的 div;只在不存在的原生元素表达行为时才用 ARIA。一个 h1、标题层级递进;正文对比度 4.5:1,大文本与非文本 UI 3:1;可见的 :focus-visible 指示器达到 3:1。触控目标不小于 24x24 CSS 像素(建议 44x44)。每个输入框有真实 label(占位符不算),错误以文本、字段旁内联并在链接的 role="alert" 区域汇总,提交时焦点移入。标记可选字段;关注 WCAG 2.2 的 3.3.7 冗余输入与 3.3.8 可访问认证(不用拼图 CAPTCHA)。全页 Tab 走查(逻辑顺序、无焦点陷阱、跳转链接);内容图片有意义的 alt,装饰图 alt="";遵循 prefers-reduced-motion(削弱而非删除),自动播放超 5 秒提供暂停。
验证与限制:axe-core / Lighthouse 仅覆盖约 30-40% 问题,只能作为底线;发布前需做一次纯键盘走查与一次屏幕阅读器抽查(NVDA/VoiceOver),并在 CI 中设置 axe-core/Pa11y 门禁。不要安装无障碍覆盖层组件。法律期限(EAA、ADA)随版本变动,需对照权威来源核实。该技能输出通过 WCAG 2.2 AA 的页面、CI 门禁与人工测试记录,且不采用覆盖层。其余实现细节与完整规则见其参考资料。