SuperAPI AI 工具集

auditing-accessibility-wcag

测试与质量

查看项目

更新于 10-16 00:04

技能介绍

用途:当用户询问无障碍(a11y)、WCAG 合规等级、屏幕阅读器、aria 标签或角色、组件/页面审计,以及需要无障碍替代模式时使用。工作流为:确定范围(组件、页面或站点)→ 运行自动化审计 → 复核人工检查点 → 按严重程度归类违规 → 给出修复示例 → 验证修复。

主要能力:提供 axe-core CLI、Lighthouse 无障碍审计、eslint-plugin-jsx-a11y 的安装与运行方式;给出 WCAG 2.1 AA 检查清单(可感知、可操作、可理解、健壮四原则及常见问题);列举常见违规与修复,如缺失 alt 文本、颜色对比度不足(AA 正文最低 4.5:1)、表单缺少标签、焦点指示缺失、标题层级跳跃、非语义按钮、缺少跳转链接;提供可访问模态框与下拉菜单的交互模式;列出屏幕阅读器与浏览器扩展测试工具、键盘测试清单、审计报告模板与验证标准。

使用方式:按步骤执行命令,例如 npm install -D @axe-core/cli 后运行 npx axe http://localhost:3000 --exit;npx lighthouse http://localhost:3000 --only-categories=accessibility --output=json;安装 eslint-plugin-jsx-a11y 并在 eslint.config.js 中引入 jsxA11y.flatConfigs.recommended。

适用场景:组件或页面无障碍审计、开发期静态检查、CI 中集成无障碍测试、键盘与屏幕阅读器人工验证。

限制:自动化工具可能产生误报,需人工复核;动态内容需在 JavaScript 加载后重新审计;第三方组件不可访问时只能记录并跟进;复杂组件应参考 WAI-ARIA Authoring Practices。验证要求 axe-core 零违规、Lighthouse 无障碍得分不低于 90、键盘导航可用、屏幕阅读器播报正确、对比度达标、焦点可见。