SuperAPI AI 工具集

accessibility-aria-expert

前端与建站

查看项目

更新于 10-16 06:47

技能介绍

用途:在 React/Fluent UI Webview 组件中检查并修复无障碍问题,覆盖读屏器兼容、ARIA 标签、工具提示、状态播报和焦点管理。

主要能力:审查代码无障碍问题;修复读屏器重复播报;为纯图标按钮或表单输入补充缺失的 aria-label;让工具提示可被键盘和读屏器访问;播报加载、搜索结果、错误等状态变化;对话框/模态打开时管理焦点;用标签聚合相关控件。此外要求做可访问名称审计:渲染文本与计算出的可访问名称需一致,可访问名称须包含完全相同的本地化可见文本。

使用方式:核心模式为工具提示需同时使用 aria-label 与 aria-hidden 防止重复播报,例如 <Badge tabIndex={0} className="focusableBadge" aria-label="Badge text. Detailed explanation"><span aria-hidden="true">Badge text</span></Badge>。动态状态使用 Announcer 组件:import { Announcer } from '../../api/webview-client/accessibility';,通过 when、message、politeness 属性控制播报。优先使用可见后代文本作为原生可访问名称,简单扁平描述用 aria-description,共享或结构化描述用 aria-describedby。Playwright 中可对渲染标签与可访问名称同时断言,并检查可访问描述。

适用场景:Webview 无障碍代码审查、ARIA 修复、读屏器兼容验证,以及涉及工具提示、图标按钮、表单输入、状态播报、对话框和控件分组的界面。

限制:资料未提供安装命令、价格、平台支持与效果数据。需注意 aria-label 会覆盖后代文本;不要为命名附近语义元素而添加绝对定位的仅读屏元素,避免 VoiceOver 滚动内容;隐藏文本仅在无法直接表达语义关系时使用,并需用 VoiceOver 或 NVDA 手动验证;Playwright 的可访问名称断言无法检测读屏器驱动的视觉回归。