技能说明
适用于上线前无障碍审计、键盘与辅助技术支持、表单和媒体体验检查。自动化分数不能代替人工验证，也不构成法律或认证意见。
关于此技能
来自 addyosmani/web-quality-skills 的网页无障碍专项流程，按 WCAG 2.2 和 Lighthouse 检查页面是否能被不同能力与辅助技术用户使用。
核心能力
覆盖 WCAG 核心原则
围绕可感知、可操作、可理解、稳健四个原则检查文本替代、对比度、键盘操作、表单提示和语义结构。
自动检查加人工复核
结合 Lighthouse 或 axe、可访问性树、键盘操作和屏幕阅读器思路，避免把自动化分数误当成完整合规。
给出可落地修复
提供图片 alt、焦点样式、跳过链接、错误关联、媒体字幕和目标尺寸等具体实现方向。
适用场景
上线前无障碍审计
检查落地页、表单、后台和关键流程的 WCAG 2.2 风险，并按严重程度整理修复顺序。
键盘与辅助技术支持
验证 Tab 顺序、焦点可见性、无键盘陷阱、语义名称、角色和状态是否清楚。
表单、媒体与视觉呈现
处理标签、错误提示、替代文本、字幕、对比度、触控目标和减少动效等问题。
使用步骤
- 01
先跑页面检查
页面可运行时先做 Lighthouse 无障碍检查，用失败节点定位组件，而不是全仓库盲目搜索。
- 02
检查可访问结构
读取可访问性树，确认名称、角色、状态、地标和标题结构，并用键盘走一遍受影响流程。
- 03
按 WCAG 原则修复
优先解决缺少名称、对比度不足、键盘陷阱、表单错误未关联等高影响问题。
- 04
复测并说明边界
重新跑同一检查并记录结果；说明自动化无法覆盖的屏幕阅读器、真实用户和人工验证事项。
常见问题
自动化分数达到 100 就算合规吗？+
不算。自动化只能发现部分障碍，仍需要键盘、屏幕阅读器、缩放和真实用户等人工验证。
需要特定前端框架吗？+
不需要，适用于 React、Vue、Angular、Svelte、Next.js、Nuxt、Astro 和原生 HTML 等网页。
它能替代法律或认证意见吗？+
不能。它提供工程检查和修复建议，不构成法律意见、无障碍认证或合规保证。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/08
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
npx skills add https://github.com/addyosmani/web-quality-skills --skill accessibility