mcpField
A
accessibility-audit

accessibility-audit

github.com/nickcrew测试与质量6268 次安装18 周前更新
代码仓库

关于 accessibility-audit

accessibility-audit 是用于页面、组件和 PR 的轻量级无障碍初筛技能，结合自动扫描与人工检查，并指出需要完整审计的情况。

主要功能

  1. 01自动化无障碍扫描指引
  2. 02键盘导航检查
  3. 03语义与标签检查
  4. 04视觉对比度检查
  5. 05动态更新与动画检查
  6. 06完整审计升级条件

适用场景

  1. 01发布前检查无障碍问题
  2. 02验证组件级无障碍性
  3. 03发现 PR 中的回归问题
  4. 04快速检查 WCAG 2.2 AA

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nickcrew/claude-cortex --skill accessibility-audit

安装后在 Claude Code 中输入/accessibility-audit确认已加载。

详细介绍

无障碍审计技能

针对页面、组件或 PR 的快速、高效无障碍初步检查。这是一项轻量级检查，并非完整的合规审计。

何时使用此技能

  • 发布前快速检查无障碍情况
  • 验证组件级无障碍功能
  • 在 PR 审查中检查是否存在无障碍回归问题
  • 对 WCAG 合规性进行冒烟测试
  • 验证新功能的键盘导航

快速审计清单

1. 自动化快照（推荐）

先运行以下任一自动化工具：

  • npx @axe-core/cli <url> - 快速运行 axe-core 扫描
  • npx pa11y <url> --standard WCAG2AA - Pa11y 审计
  • Lighthouse 无障碍评分（Chrome DevTools > Lighthouse > Accessibility）
2. 键盘基础检查
检查项预期结果
所有交互元素都可通过 Tab 访问是
焦点指示器始终可见是
不存在键盘陷阱是
Tab 顺序符合逻辑是
长页面中的跳过链接有效是
3. 语义和标签
检查项预期结果
只有一个描述性 H1是
标题顺序符合逻辑（没有大幅跳级）是
表单输入框具有可见标签或 aria-label是
按钮和链接具有明确的名称是
图片具有有意义的替代文本（装饰性图片除外，可使用空文本）是
4. 视觉对比度
元素最低对比度
正文文本4.5:1
大号文本（18pt+ 或粗体 14pt+）3:1
UI 组件（输入框、按钮、焦点环）3:1
5. 动效和更新
检查项预期结果
遵循 prefers-reduced-motion 设置是
动态更新会通过 aria-live 播报是

输出格式

运行审计后，按以下格式报告发现：

## Accessibility Audit: [Component/Page Name]

### Result: [Pass | Needs Fixes | Escalate to Full Audit]

### Findings

| Severity | Issue | Location | Fix Guidance |
|----------|-------|----------|--------------|
| Critical | [Description] | [Selector/Line] | [How to fix] |
| Major | [Description] | [Selector/Line] | [How to fix] |
| Minor | [Description] | [Selector/Line] | [How to fix] |

### Escalation Recommendation
[If applicable, explain why a full audit is needed]

何时升级为完整审计

  • 导航结构有新增或变更
  • 表单或身份验证流程较复杂
  • 使用自定义控件或高级交互（模态框、折叠面板、标签页）
  • 面向公众发布或有合规要求
  • 页面结构有重大变化
  • 自动化扫描失败，且发现多项严重问题

备注

  • 默认情况下，此冒烟检查针对 WCAG 2.2 AA
  • 如果要求其他合规等级，请明确说明
  • 自动化工具只能发现约 30-40% 的问题；手动测试必不可少
  • 请使用实际屏幕阅读器（VoiceOver、NVDA）进行测试，以全面检查

评论

支持 Markdown