SuperAPI AI 工具集

accessibility-expert

前端与建站

查看项目

更新于 10-16 03:17

技能介绍

用途:帮助开发者构建符合 WCAG 2.2 的无障碍界面,核心观点是无障碍是标记与交互模型的属性,而非后期叠加的层。

主要能力:讲解 POUR 四原则(可感知、可操作、可理解、健壮)与 A/AA/AAA 合规等级;强调优先使用原生元素而非 div 加 ARIA;覆盖键盘可达性、可见焦点样式(:focus-visible)、焦点管理(对话框用 showModal、路由切换后聚焦标题、跳转链接)、语义结构与标题层级、重复地标标注、图片替代文本的写法、视频字幕与音频描述。

表单要点:每个输入框都要有 label for,错误文本用 aria-describedby 关联并说明修复方式,错误摘要用 role=alert,禁用提交按钮会阻断解释,另有 WCAG 2.2 的 3.3.7 冗余输入与 3.3.8 无障碍认证。

颜色与动效:给出对比度比值要求(普通文本 4.5:1、大文本 3:1、非文本 3:1)、目标尺寸 24×24px、不得仅用颜色传达信息,并给出 prefers-reduced-motion 媒体查询处理。动态内容使用 aria-live 的 polite/assertive,且区域须先存在于 DOM。

测试方式:npx @axe-core/cli https://localhost:3000 --exit、npx lighthouse https://localhost:3000 --only-categories=accessibility,以及 jest-axe 集成;手动检查包括拔掉鼠标完成主任务、放大到 400%、使用 NVDA/VoiceOver、灰度检查,并建议与真实辅助技术用户一起测试。

限制:自动化工具只能发现约三分之一问题,自动化得分不等于合规;无障碍覆盖层不被认可为合规方案。