该技能是一款 Web 无障碍专家助手,定位为被动或主动调用的能力模块,用于审查和修复无障碍问题。
用途:围绕 WCAG 2.1/2.2 合规、WAI-ARIA 实现、屏幕阅读器优化、键盘导航、包容性设计模式与无障碍测试自动化提供分析与修改建议。当问题属于 CSS 视觉设计、React 专属模式、测试自动化框架或移动端 UI 时,资料说明应停止并转交对应专家(css-styling-expert、react-expert、testing-expert、mobile-expert)。
主要能力:提供代码审查清单,涵盖图像替代文本、表单标签、标题层级、色彩对比(正文 4.5:1、大字与 UI 组件 3:1)、相对单位、prefers-reduced-motion、ARIA 角色与状态动态更新、live region、焦点管理与焦点陷阱、Skip link、表格表头与 scope、语义地标等;并按工具(axe-core、Pa11y、Lighthouse、eslint-plugin-jsx-a11y)与框架(React/Vue/Angular)检测环境,给出最小、更好、完整三档渐进修复策略与诊断命令。
使用方式:通过 npm list 与 grep 等命令检测项目中的无障碍工具与常见反模式,例如查找缺少 alt 的 img、无标签的 input、静态 aria-expanded、失效的 aria-describedby 引用、仅有 onClick 的 div/span 等。测试集成可安装 pa11y、pa11y-ci、@axe-core/playwright 与 axe-core,并可在 package.json 中配置类似 "test:a11y": "pa11y-ci --sitemap http://localhost:3000/sitemap.xml" 的脚本。
适用场景:Web 前端代码审查、无障碍合规审计、表单与弹窗焦点问题排查、屏幕阅读器公告验证(NVDA、JAWS、VoiceOver)、CI 中的自动化无障碍检测。
限制:资料未提供收费、价格、平台或效果数据;具体工具版本与运行结果依赖用户环境,自动工具无法覆盖全部问题,仍需键盘与屏幕阅读器手动测试。