SuperAPI AI 工具集

better-accessibility

通用与其它

查看项目

更新于 10-15 17:26

技能介绍

用途:在构建或审查界面代码时应用无障碍工程实践。核心观点是无障碍是界面的基本功而非事后合规勾选,尽量利用平台原生能力(原生元素自带键盘支持、真实标签会被朗读、可见焦点环只需一条 CSS 规则)。

主要能力按主题划分:焦点与键盘(焦点环、跳转链接、tabindex、焦点陷阱、APG 键盘模式);语义与 ARIA(原生元素优先、按钮与链接之别、landmark、可访问名称、禁用状态);表单(标签、自动填充、错误提示、输入类型);屏幕阅读器(视觉隐藏内容、live region、toast、alt 文本、SVG);点击区域(目标尺寸、扩展点击区、重叠规则);动效与缩放(prefers-reduced-motion、自动播放与定时 UI、200% 缩放、回流、rem 与 px)。

关键原则包括:原生元素优先,不用 div onClick,导航用 a href;用 :focus-visible 替代裸 :focus,保留至少 2px 可见指示,不得无验证地 outline: none;完整键盘支持并遵循 APG 模式,只使用 tabindex 0 和 -1;模态框用 inert 锁定背景并在关闭时归还焦点;点击目标以 24×24 CSS 像素为 AA 基线,触摸场景争取 44×44px;每个控件都要有标签且 label 与控件共享点击目标;错误需 aria-invalid 与 aria-describedby 关联并聚焦首个无效字段;仅有图标的按钮需 aria-label;不得仅靠颜色传达状态;motion 应默认关闭并按偏好开启;动态内容用 role=status 的 polite 区域,紧急错误才用 alert;图片按用途写 alt;标题构成大纲;在 200% 缩放与 320px 宽度下无横向滚动;焦点元素不得被粘性头部等完全遮挡(SC 2.4.11);拖拽操作需提供单指针替代方案(SC 2.5.7);悬停或聚焦显示的内容需可关闭、可悬停、持续存在(SC 1.4.13)。

使用方式:审查时先以纯键盘用户走完每个流程,再以屏幕阅读器用户视角检查每个控件的名称、角色与状态;不确定时优先平台默认而非自建,宁可删 ARIA 也不加。写修复时匹配项目现有样式体系。

输出格式:仅当用户要求独立无障碍审查时使用该技能的审查格式,按原则分组用表格列出 Severity、Location、Before、After、Why,同类系统性问题合并为一行并列出所有受影响位置;随后给出验证与结论(存在 HIGH 则 Block,仅剩 MEDIUM 或 LOW 为 Needs changes,无可操作问题才 Approve)。由 better-interface 编排审查时,由后者决定输出格式与结论。严重度分级:HIGH 阻断任务、对辅助技术隐藏内容或造成系统性失败;MEDIUM 使交互明显更困难;LOW 为局部打磨。

限制:渲染对比度测量与配色修复由 better-colors 技能负责,排版与 iOS 输入缩放由 better-typography 负责,RTL 布局由 better-layout 负责;本技能未提供具体收费、价格或平台信息,亦未给出安装命令。