SuperAPI AI 工具集

accessibility-implementation

编程与开发

查看项目

更新于 10-15 23:49

技能介绍

用途:在代码层面实现无障碍(a11y),把 WCAG 2.1/2.2 成功标准、ARIA 模式与辅助技术支持落到组件与页面中。适合在实现无障碍组件、添加 ARIA 角色/状态/实时区域、接入键盘导航与焦点陷阱、跳转链接,或用 axe-core、jest-axe、Playwright 审计组件时使用。若需求是设计令牌或主题系统,资料建议改用 design-tokens。

主要能力:覆盖 WCAG A/AA 关键条目,如非文本内容替代、语义 HTML 与 ARIA 关系、键盘可达、跳转块、名称/角色/值、对比度(正文 4.5:1、大字 3:1、UI 组件 3:1)、标题层级与可见焦点(2px 以上轮廓)。提供按钮与链接、表单控件、组合框、模态对话框、选项卡、实时区域的 ARIA 写法,以及焦点陷阱、焦点归还、错误聚焦、漫游 tabindex 等键盘导航实现。

使用方式:优先使用原生语义 HTML,再考虑 ARIA;不要用 JS 破坏原生行为。测试可用 npx @axe-core/cli、npx lighthouse --only-categories=accessibility、npx pa11y,单元测试用 npm install --save-dev jest-axe,端到端用 @axe-core/playwright。手动检查键盘可达性、焦点顺序与可见性、无键盘陷阱、Escape 关闭,并用 VoiceOver(Cmd+F5)或 NVDA 验证。

限制:自动化工具约只能发现三成问题,必须配合辅助技术手动测试与真实用户测试;资料未提供该技能的安装命令、收费、平台与版本要求。