SuperAPI AI 工具集

detecting-accessibility-issues

前端与建站

查看项目

更新于 10-16 00:32

技能介绍

用途:审查并修复 React/Fluent UI Webview 组件中的无障碍问题,面向屏幕阅读器、键盘和语音控制用户。

主要能力与检测规则:工具提示缺少 aria-label 上下文;缺少 aria-hidden 导致重复播报;与可见文本重复的多余 aria-label;仅图标按钮缺少可访问名称;装饰性元素未隐藏;输入控件缺少可访问名称;可访问名称未包含可见标签(影响语音控制);状态变化未播报;对话框打开时焦点未移动;相关控件缺少分组标签。

用法要点:工具提示需 aria-label 提供完整上下文,并用 aria-hidden="true" 包裹可见文本避免重复播报;装饰性元素用 aria-hidden={true};仅图标按钮加 aria-label;输入用 aria-label 或 Label htmlFor 关联;可见标签须原样包含在可访问名称中;状态变化使用 Announcer 组件(when、message、politeness 属性,message 用 l10n.t() 本地化),对话框打开时用 useEffect 将焦点移至 ref 并设置 tabIndex={-1}、aria-modal="true";相关控件用 role="group" 加 aria-labelledby;带提示的 Badge 使用 focusableBadge 类与 tabIndex={0}。

适用场景:React/Fluent UI Webview 代码审查、修复屏幕阅读器双重播报、ARIA 标签补全、工具提示可访问性、加载与搜索结果等状态播报、模态焦点管理。

限制:资料未提供安装命令、收费信息或具体支持的平台版本。