SuperAPI AI 工具集

web-accessibility

前端与建站

查看项目

更新于 10-15 19:54

技能介绍

用途:按 WCAG 2.1 构建和审查网页无障碍,适合新建可访问组件、修复现有站点问题、实现屏幕阅读器友好表单、处理模态框与下拉菜单的焦点管理与键盘陷阱、满足合规要求。

主要能力:五步流程。一、语义化 HTML:使用 button、nav、main、header、footer 等标签,避免滥用 div/span,正确使用 h1~h6 层级,label 关联 input。二、键盘导航:Tab/Shift+Tab 移动焦点,Enter/Space 激活按钮,方向键导航列表,ESC 关闭弹层;tabindex="0" 可聚焦,tabindex="-1" 仅程序聚焦,避免 tabindex="1+" 打乱顺序。三、ARIA 属性:aria-label、aria-labelledby、aria-describedby、aria-live(assertive/polite)、aria-hidden 等,用于补充屏幕阅读器上下文。四、颜色对比与视觉:WCAG AA 正文 4.5:1、大字 3:1;AAA 为 7:1 与 4.5:1;不得仅用颜色传达信息,须有清晰焦点轮廓(outline)。五、测试:axe-core、Pa11y、Lighthouse、NVDA/JAWS/VoiceOver、纯键盘实测。

使用方式:输入需提供框架(如 React+TypeScript)、组件类型、WCAG 级别(默认 AA),可选屏幕阅读器、测试工具与浏览器。输出包含语义化 HTML、键盘导航、ARIA、视觉与测试清单。示例使用 jest-axe 断言 toHaveNoViolations,并配合 Testing Library 的 fireEvent.keyDown 验证 Enter/Space。

限制与禁止:不得使用 outline: none;避免 tabindex 大于 0;不得只用颜色传达信息;表单标签不能用 placeholder 替代。资料未提供具体安装命令、价格、平台支持范围等,暂未提供。

适用场景:表单、模态框、下拉菜单、选项卡、通知与 SPA 焦点管理等前端无障碍实现与审查。