如何一次性通过 WCAG 2.2 无障碍审计？web-quality-skills 的 40+ 条 a11y 规则速查清单

如何一次性通过 WCAG 2.2 无障碍审计web-quality-skills 的 40 条 a11y 规则速查清单【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skillsweb-quality-skills 是一套面向 AI 编程助手的 Web 质量优化 Agent Skills内置 40 条基于 Lighthouse 审计与 WCAG 2.2 标准的 web 无障碍a11y规则。本文带你用它的 accessibility 技能按 POUR 四大原则逐项自查一次性通过 WCAG 2.2 无障碍审计。 web-quality-skills 是什么一句话把 150 次 Lighthouse 审计和 WCAG 2.2 经验沉淀成 AI 能直接执行的质量检查技能。它完全框架无关——React、Vue、Next.js、原生 HTML 都适用。仓库包含 6 个技能其中与本文相关的是 accessibilityWCAG 2.2 无障碍审计和 web-quality-audit全站综合审计。安装只需一条命令npx skills add addyosmani/web-quality-skills也可以手动复制到~/.claude/skills/。之后对 AI 说一句帮我做 WCAG 审计技能就会自动激活。先搞懂 3 个合规等级再谈一次性通过WCAG 2.2 的合规分为三级审计目标不同检查深度也不同等级定位建议目标A最低无障碍门槛✅ 必须通过AA标准合规多地法律要求 推荐目标AAA增强无障碍锦上添花大多数站点审计以AA 级为验收线。下面的速查清单按 A 和 AA 级规则整理AAA 增强项会在对应条目标注。 WCAG 2.2 的 40 条规则速查清单完整规则对照表见 references/WCAG.md这里按 POUR 四原则拆解重点。1️⃣ 可感知 Perceivable让信息看得见、听得到1.1.1 图片必须有 alt 文本描述性图片写清内容装饰性图片用空alt——这是被审计抓得最勤的一条1.2.2 / 1.2.4 视频字幕有声视频要配字幕直播音频要配实时字幕1.4.3 文字对比度普通文字 ≥ 4.5:1大字 ≥ 3:1AAA 增强到 7:11.4.1 不能只靠颜色传信息错误提示要颜色 图标 文字三件套1.4.10 重排内容在 320px 宽度下重排无横向滚动1.4.11 UI 组件对比度输入框边框、图标等控件对比度 ≥ 3:11.4.13 悬浮/聚焦内容hover 弹出的说明要可关闭、可悬停、可持久显示2️⃣ 可操作 Operable键盘和鼠标用户都不卡壳2.1.1 全键盘可操作优先用原生button、a href和表单控件键盘激活、焦点语义全免费2.1.2 无键盘陷阱焦点能 Tab 进、也必须能 Tab 出弹窗建议用原生dialog2.4.7 焦点可见永远不要outline: none一删了之改用:focus-visible2.4.1 跳过导航链接给键盘用户一个直达主内容的快捷入口2.2.2 暂停/停止/隐藏自动播放的移动、闪烁内容必须可暂停WCAG 2.2 新增旧版审计最容易漏2.4.11 焦点不被遮挡聚焦元素不能被 sticky 头栏完全盖住用scroll-margin-top留出空间2.5.7 拖拽操作任何拖拽功能排序、滑块都要提供单指针替代方案如上下移按钮2.5.8 目标尺寸可点击目标至少 24×24 CSS 像素推荐 44×443️⃣ 可理解 Understandable表单和导航别让人猜3.1.1 页面语言html langzh-CN不能漏3.3.2 表单必须有 labelplaceholder 不算 label这是 Critical 级高频问题3.3.1 / 3.3.3 错误处理报错要描述清楚、关联到具体字段且给出修正建议3.2.3 导航一致性全站导航结构保持统一2.2 新增的表单体验三连3.2.6 帮助机制一致客服、FAQ 等帮助入口在多页面出现时相对顺序必须一致3.3.7 避免重复录入同一会话内已填过的信息要自动填充或可复选3.3.8 无障碍认证登录不能只考记忆力——要支持粘贴密码、passkey 或邮箱链接等替代方式4️⃣ 健壮 Robust让辅助技术读得懂4.1.2 名称、角色、值能用原生元素就别套 ARIAdiv rolebutton是典型的多此一举4.1.3 状态消息动态变化用aria-live区域播报别靠用户刷新才发现弹窗、标签页、通知正确搭配role、aria-modal、aria-selected等属性 以上每条规则的可直接复制的修复代码都在 references/A11Y-PATTERNS.md 里包括弹窗焦点陷阱、跳过链接、拖拽替代方案、ARIA 标签页等 10 个实战模式。⚡ 用 accessibility 技能做审计的 3 步流程第 1 步让 AI 跑一遍自动化规则对 AI 助手说做 a11y 审计或WCAG 合规检查accessibility 技能会自动按 40 条规则扫描代码并输出问题。也可以用命令行自查npx lighthouse https://你的站点 --only-categoriesaccessibility第 2 步按严重度分层修复层级典型问题处理时限 Critical表单无 label、图片缺 alt、对比度不足、键盘陷阱、无焦点指示立即修复 Serious缺页面语言、标题层级混乱、链接文字无描述、自动播放媒体上线前修复 Moderate图标缺 ARIA 名称、导航不一致、错误未标识尽快修复第 3 步手动测试兜底自动化测不出来的全程 Tab 键走一遍Enter/Space 能激活所有交互用屏幕阅读器VoiceOver / NVDA听一遍页面200% 缩放下内容完整可用焦点顺序与视觉顺序一致交互元素满足 24×24px 最小尺寸 目标分数Lighthouse 无障碍 100 分根据 README 中的阈值参考无障碍的目标分数是100 分比性能更严格。建议的验收节奏每次部署前跑 axe / Lighthouse确认零无障碍错误每周抽测屏幕阅读器表现每月一次全站 Lighthouse 深度审计Codex 用户可通过 docs/codex-setup.md 安装插件在对话中用accessibility直接调用该技能。总结一次性通过 WCAG 2.2 审计的公式 AA 级 40 规则速查清单 2.2 新增 8 条重点 手动测试兜底。把 accessibility 技能交给 AI按 Critical → Serious → Moderate 的顺序修复你的 Lighthouse 无障碍分数就能稳稳站上 100 分 ✅【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考