SuperAPI AI 工具集

accessibility

通用与其它

查看项目

更新于 10-15 20:27

技能介绍

用途:以屏幕阅读器优先的视角审查、实现和修复 Web 无障碍问题,适合在构建或评审 UI 组件、表单、对话框、导航与动态内容时使用。

核心思路:屏幕阅读器把二维页面线性化为单维语音流,用户按标题、地标、表单字段、链接和控件顺序导航。由此得三条规则:优先使用原生 HTML(button、nav、h2)而非 ARIA;上下文必须与元素程序化绑定;动态变化必须被播报(移动焦点或用 live region)。

审查优先级:可访问名称(按钮、输入、链接)→ 键盘可操作性 → 焦点管理(对话框、SPA、live region)→ 语义结构 → 表单错误与校验 → 颜色对比度与视觉状态 → 动态内容播报 → 图像与媒体 → 动效、闪烁与计时。指出问题时应引用具体失败代码片段、对应 WCAG 条目,并给出最小可行修复。

常见高影响失败:仅图标按钮无可访问名称;输入无 label;用 div/span 当按钮;错误提示未与字段关联;动态内容静默更新。

强制性检查:每个输入关联 label;每个按钮有可访问名称;图标控件加 aria-label 且图标 aria-hidden="true";焦点可见;Tab 顺序与视觉顺序一致;指针交互有键盘等价;无 tabindex 大于 0;交互目标至少 24×24 CSS px;非必要动效尊重 prefers-reduced-motion,闪烁不超过每秒三次。

ARIA 规则:原生 HTML 能解决就不用 ARIA;aria-label/aria-labelledby 提供名称,aria-describedby 提供描述;aria-live="polite" 用于非紧急更新,role="alert" 用于错误;live region 必须页面加载时已存在;aria-hidden="true" 不得用于可聚焦元素。

对比度(WCAG 2 AA):正文 4.5:1,大文本 3:1,UI 组件 3:1,占位文本 4.5:1,禁用元素豁免。不可仅用颜色传达信息。可用脚本检查:python3 scripts/contrast-check.py '#333333' '#ffffff',支持 --target normal-text、large-text、ui-component、aaa-normal-text、aaa-large-text。

屏幕阅读器测试:自动化工具约覆盖 30-40% 问题,其余需 AT 测试。可用 NVDA+Firefox/Chrome、VoiceOver+Safari、JAWS+Chrome。手工测试 Tab 遍历、按 H 跳标题、按 D 跳地标、开关对话框、提交错误表单、触发动态更新。

限制:WCAG 2 AA 为唯一合规目标;APCA 仅作设计辅助,不是合规替代;资料未提供收费、价格或平台兼容细节。