SuperAPI AI 工具集

accessibility

前端与建站

查看项目

更新于 10-15 23:58

技能介绍

用途:为 Next.js 应用提供实用的无障碍(WCAG 2.2 Level AA)实践指导,覆盖语义化 HTML、键盘导航、ARIA 标签、图片替代文本、表单校验与自动化测试。

主要能力:

  1. 语义化 HTML:优先使用原生元素而非 ARIA,例如用 <button> 替代带 role="button" 的 div,用 <nav> 替代普通 div 导航。
  2. 键盘导航:要求所有交互元素可通过 Tab / Shift+Tab 到达并操作,焦点顺序符合 DOM 顺序,下拉菜单、弹窗可用 Escape 关闭,并提供可见焦点样式,如 focus-visible:outline-2 focus-visible:outline-blue-500。
  3. ARIA 标签:图标按钮需 aria-label,如 <button aria-label="Search">;导航与侧栏等区域需带标签的 landmark,如 <nav aria-label="Footer navigation">、<aside aria-label="Related articles">。
  4. Next.js 相关:Link 需可辨识文本或 aria-label;装饰性图片用 alt="" 与 role="presentation",信息性图片需描述内容;表单错误通过 aria-invalid、aria-describedby 关联输入,并用 role="alert" 提示。
  5. 自动化测试:安装 @axe-core/playwright,在 E2E 测试中注入 axe 并检查 critical、serious 级别违规。

使用方式:按上述基线逐项检查代码;运行 npm install -D @axe-core/playwright 后,在测试中调用 injectAxe 与 checkA11y。

适用场景:Next.js 前端开发、代码审查、CI 中的无障碍回归测试。

限制:资料未提供具体版本兼容性、完整配置项与全部测试用例;手动测试清单(Tab 可达性、200% 缩放、对比度 ≥ 4.5:1、屏幕阅读器 VoiceOver/NVDA 等)需人工执行,自动化工具无法覆盖全部问题。