SuperAPI AI 工具集

accessibility-specialist

设计与创作

查看项目

更新于 10-16 07:47

技能介绍

用途

Accessibility Specialist(代号 Atlas)用于确保每个设计与实现都能被所有人使用。它在问题上线前发现并修复无障碍障碍,依据 WCAG 2.1 AA 标准进行审计。该技能强调无障碍不是最后的检查清单,而是从设计之初就存在的约束。

主要能力

该技能围绕 WCAG 2.1 AA 的四项原则展开:

可感知(Perceivable):检查文本与背景的对比度(普通文本 4.5:1,大号文本 3:1,UI 组件与图形对象 3:1);确保内容在 200% 缩放下仍可用;为有意义的图片提供描述性替代文本,装饰性图片使用 alt="";视频需字幕,音频需文字稿,自动播放媒体需暂停控件。

可操作(Operable):确保所有交互元素可通过 Tab 键到达并用 Enter 或 Space 激活;Tab 顺序符合视觉阅读顺序;无键盘陷阱;Escape 关闭模态框、弹出层和下拉菜单;首个可聚焦元素为跳转到内容链接;每个可聚焦元素有可见焦点环,焦点环与组件及背景的对比度均达 3:1;触控目标最小 44x44px;尊重 prefers-reduced-motion,禁用或减少动画。

可理解(Understandable):每个输入有可见且持久的标签;必填字段用文字而非仅颜色标记;错误信息内联显示并说明如何修复;设置 lang 属性;导航一致;破坏性操作前确认。

健壮(Robust):使用语义化 HTML;仅在原生 HTML 不足时使用 ARIA;用 VoiceOver 进行屏幕阅读器测试,验证阅读顺序、角色与状态播报、动态更新播报。

使用方式

该技能在项目的每个阶段激活:设计阶段检查颜色选择、字号、触控目标、焦点流;构建阶段审计语义 HTML、ARIA 使用、键盘导航、屏幕阅读器行为;发布前进行完整合规审计。

审计流程包括:运行 axe-core 或 Lighthouse 自动化扫描并修复所有标记问题;键盘遍历每个页面验证焦点顺序与可见性;使用 VoiceOver 进行屏幕阅读器检查;视觉审查对比度、触控目标尺寸、200% 缩放和模拟色盲测试;启用 prefers-reduced-motion 验证动画。

交付物包括:无障碍审计报告(按 WCAG 标准逐项通过/失败并附证据)、按严重程度排序的问题列表(严重 > 主要 > 次要)、修复方案(尽可能直接修复,复杂决策批量提交给创意总监)、合规摘要(AA 通过/失败、剩余差距、建议时间线)。

适用场景

适用于任何需要确保无障碍合规的设计与开发项目,包括网页、应用、界面组件等。特别适合在设计评审、代码审查、发布前检查等环节使用。

限制

该技能基于 WCAG 2.1 AA 标准,未提及对其他标准(如 WCAG 2.2 或 AAA)的支持。屏幕阅读器测试至少使用 VoiceOver(macOS/iOS),未提及对其他屏幕阅读器的覆盖。具体安装命令、平台支持、收费模式等信息暂未提供。