SuperAPI AI 工具集

web-accessibility

通用与其它

查看项目

更新于 10-15 22:14

技能介绍

用途:该技能面向需要构建无障碍 Web 应用的开发场景,依据 WCAG 2.1 指南,帮助实现 ARIA 模式、键盘导航、屏幕阅读器支持等无障碍要求。

主要能力:资料给出多类可访问组件模式,包括按钮(aria-pressed、aria-disabled)、模态对话框(role="dialog"、aria-modal、aria-labelledby、aria-describedby)、导航菜单(nav aria-label、role="menubar"、aria-haspopup、aria-expanded)。还涉及键盘导航与焦点管理,例如模态打开时记录并恢复先前焦点、将焦点限制在弹窗内、支持 Escape 关闭与 Tab 循环。

无障碍规范:颜色对比度遵循 WCAG AA 最低比例——正文文本 4.5:1,大号文本(18pt 以上)3:1,UI 组件 3:1;资料包含计算对比度与相对亮度的函数实现。可访问表单通过 label 的 htmlFor、aria-required、aria-invalid、aria-describedby 及 role="alert" 错误提示实现,并提供仅屏幕阅读器可见内容的 .sr-only 样式。

使用方式与限制:可作为编码代理在各框架中实现无障碍组件时的参考。测试部分给出安装命令 npm install -D axe-core @axe-core/react,并示例用 jest-axe 的 axe 与 toHaveNoViolations 断言组件无违规。资料未提供价格、平台支持范围或完整工具清单,实际可用性与配置细节暂未提供。