🚀 WCAG审计神器！wcag-audit-patterns助你轻松应对无障碍挑战😭

核心功能

对于每一位前端开发者来说，Web无障碍（Accessibility）不再是一个可选项，而是衡量产品质量和企业社会责任感的硬指标。然而，WCAG（Web内容无障碍指南）的标准复杂繁多，手动审计和修复不仅耗时耗力，还容易遗漏关键点。现在，有了wcag-audit-patterns这个神仙Skill，一切都将变得简单高效！

这个Skill就像一位内置于你开发环境中的无障碍专家，它提供了一套从审计到修复的完整工作流：

• 全面的审计清单：基于最新的WCAG 2.2标准，覆盖A、AA、AAA三个一致性等级，将抽象的POUR原则（可感知、可操作、可理解、鲁棒）具体化为可执行的检查项。
• 自动化测试集成：展示了如何使用axe-core等业界主流工具，将无障碍检查集成到你的自动化测试流程中，实现早期预警和持续集成。
• 清晰的修复模式：针对常见的无障碍违规（如缺失alt文本、颜色对比度不足、键盘陷阱等），提供了“Before & After”式的代码修复范例，让你一看就懂，一改就对。
• 最佳实践指导：总结了无障碍开发的“Do’s & Don’ts”，帮助团队从源头构建高质量的无障碍体验，避免重复踩坑。

适用平台

这款Skill的设计初衷就是为了赋能现代AI辅助开发流程。它完美适配市面上所有主流的AI编程助手，包括但不限于Cursor、GitHub Copilot、Claude Code、OpenAI Codex、Gemini Code Assist、文心快码、腾讯云CodeBuddy以及华为云CodeArts。你可以把它看作是这些强大IDE的“最强外挂”，通过提供精准、结构化的无障碍知识上下文，它能显著提升AI在生成和审查代码时的无障碍意识和能力，让AI写的代码也符合合规标准。

实操代码示例

理论说再多，不如直接看代码来得实在。下面是几个wcag-audit-patterns中的经典实操片段：

1. 集成axe-core进行自动化审计

在你的Playwright或Cypress测试中加入以下逻辑，即可自动扫描页面无障碍问题：

// playwright-test-example.jsnconst { test, expect } = require('@playwright/test');nconst { AxeBuilder } = require('@axe-core/playwright');nntest('页面应符合WCAG AA标准', async ({ page }) => {n  await page.goto('https://example.com');nn  const accessibilityScanResults = await new AxeBuilder({ page })n    .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])n    .analyze();nn  expect(accessibilityScanResults.violations).toEqual([]);n});

2. 修复缺失的表单标签（关键违规）

屏幕阅读器用户严重依赖标签来理解输入框的用途。

<!-- Before: 屏幕阅读器无法识别 -->n<input type='email' placeholder='Email' />nn<!-- After: 最佳实践，使用label for属性 -->n<label for='email'>Email address</label>n<input id='email' type='email' />nn<!-- After: 备选方案，使用aria-label -->n<input type='email' aria-label='Email address' />

3. 保证焦点状态清晰可见

键盘用户的导航依赖清晰的焦点指示器，千万不要用`outline: none;`把它去掉！

/* 保证任何被聚焦的元素都有清晰的轮廓 */n:focus-visible {n  outline: 3px solid #005fcc;n  outline-offset: 2px;n  box-shadow: 0 0