SuperAPI AI 工具集

accessibility-review

设计与创作

查看项目

更新于 11-01 16:13

技能介绍

accessibility-review 是一个面向设计与前端交付前的无障碍(a11y)审查技能,来源于 poorvith-mp/skills-design 技能库。其核心理念是把无障碍视为设计与软件架构的核心部分,而不是产品上线前临时补做的合规清单,目标覆盖视觉、听觉、运动与认知障碍用户,并参考 WCAG 2.2 AA/AAA 要求。

用途与审查流程:该技能按四步系统化协议执行审查。第一步检查颜色对比与视觉感知:正文(小于 18pt 或小于 14pt 粗体)对比度至少 4.5:1,大文本至少 3.0:1,UI 组件与图形对象至少 3.0:1;同时禁止仅用颜色表达错误、状态或图表差异,需配合文字、图标或不同线型。第二步检查触摸目标尺寸与间距:WCAG 2.2 最低要求为 24x24 CSS 像素或满足间距规则,AAA 与原生平台建议 44x44px(iOS HIG)和 48x48dp(Material Design),可通过 CSS padding 扩大可点击区域。第三步检查键盘焦点与导航顺序:DOM 顺序应与视觉阅读顺序一致,不使用正 tabindex,保留高对比度可见焦点环(至少 2px、对比度 3:1),弹窗、抽屉和下拉菜单不得形成键盘陷阱,需支持 Tab、Shift+Tab 与 Esc 进出。第四步检查动效敏感性与认知负荷:通过 prefers-reduced-motion 媒体查询关闭非必要动画,并确保任何 1 秒内闪烁不超过三次。

主要能力:技能提供可执行的审查标准与判定阈值,并给出标准化的 A11Y-AUDIT.md 交付格式,包括执行摘要与合规评分、违规与修复矩阵(含准则编号、严重级别、元素选择器、问题描述与所需代码修复),以及屏幕阅读器与 ARIA 验证清单。资料中还给出结算弹窗焦点修复的示例,说明如何限制焦点在弹窗内、设置初始焦点并在关闭后归还焦点。

使用方式:按上述四步协议对待审查的组件或页面逐项检查,将发现整理为 A11Y-AUDIT.md 报告,并结合验证清单核对正文对比度、触摸目标尺寸、可见焦点、tabindex 使用和 reduced-motion 支持。资料未提供具体安装命令或运行方式,暂未提供。

适用场景:适合在设计与开发早期审计页面或组件,如结算与支付表单、弹窗、表单控件、图标按钮等,提前发现对比度不足、焦点不可见、点击区域过小和动效风险。

限制:资料以审查准则和报告模板为主,未说明自动化程度、支持的技术栈或与具体工具链的集成方式;安装与收费信息暂未提供。