SuperAPI AI 工具集

better-accessibility

通用与其它

查看项目

更新于 10-15 23:42

技能介绍

用途:面向产品界面的无障碍工程技能,用于在构建或审查 UI 时落实无障碍原则,而非事后合规补丁。核心主张是尽量利用平台原生能力:原生元素自带键盘支持,真实标签可自动播报,一条 CSS 规则即可实现可见焦点环。应用时需匹配项目现有样式体系(Tailwind、纯 CSS 或 CSS-in-JS)。审查时先以纯键盘用户走通所有流程,再以屏幕阅读器用户视角检查每个控件是否播报名称、角色与状态;不确定时优先平台默认而非自建,宁删 ARIA 不加 ARIA。渲染对比度测量与配色修复由 better-colors 负责,视觉字号与 iOS 输入缩放由 better-typography 负责,RTL 空间布局由 better-layout 负责。

主要能力与要点:原生元素优先(操作用 button,导航用 a href);焦点环用 :focus-visible,至少 2px 实线周长,不用 outline:none 除非有经验证的替代;完整键盘支持,遵循 APG 模式,只用 tabindex 0 与 -1,复合组件用 roving tabindex;模态框用 inert 隔离背景、打开时移入焦点、关闭时归还焦点并加 overscroll-behavior: contain;最小点击区域 WCAG 2.5.8 AA 为 24×24 CSS 像素,触控建议 44×44px、桌面 40×40px,扩展区不得重叠;每个控件配 label,placeholder 不作标签,添加有意义的 autocomplete 与正确 type/inputmode,不阻止粘贴;错误用 aria-invalid 与 aria-describedby 并聚焦首个无效字段;图标按钮需 aria-label;不得仅靠颜色传达状态;尊重 prefers-reduced-motion,自动播放媒体需可见暂停控件,含操作或错误的 toast 保持至手动关闭;动态内容用 role=status 礼貌播报,紧急错误用 role=alert,重复播报需先渲染稳定空区域再更新文本;装饰图 alt="",功能图描述动作;标题构成连贯大纲并暴露一个 main 地标,前置导航时提供跳转到内容链接;支持 200% 缩放与 320px 重排,不用 maximum-scale=1。

使用方式:当用户请求独立无障碍审查时,按“发现+验证与结论”两部分输出,发现按原则分组并用表格列出 Severity、Location、Before、After、Why;由 better-interface 编排时则向该技能提供领域证据与发现,服从其格式、严重级、合并规则与上限。严重级:HIGH 阻断任务、隐藏内容或系统性失败;MEDIUM 明显增加交互难度;LOW 局部打磨。位置引用 path/to/file:line,无源文件则引用具体界面与组件。结论:存在 HIGH 为 Block,仅 MEDIUM/LOW 为 Needs changes,无问题为 Approve。

限制:具体支持的框架、版本与平台兼容性资料暂未提供;示例命令与安装方式暂未提供;颜色改动需另行通过 better-colors 测量,未经要求不应修改项目配色。