SuperAPI AI 工具集

accessibility-wcag

前端与建站

查看项目

更新于 10-16 00:04

技能介绍

用途:在设计 UI、实现组件和确保符合无障碍标准(WCAG 2.1/2.2)时使用,帮助构建包容、可用的界面,并满足 AA 或 AAA 合规要求。

核心原则(POUR):可感知(信息对所有感官可用)、可操作(界面元素对所有用户可用)、可理解(内容与界面清晰)、健壮(跨技术包括辅助设备可用)。

主要能力:实现 ARIA 标签、角色与属性;确保完整键盘导航支持;支持屏幕阅读器(NVDA、JAWS、VoiceOver);为图片和媒体提供替代文本;管理焦点与焦点指示器;创建带正确标签的无障碍表单;使用 axe DevTools 或类似工具测试;为色盲和低视力设计;实现跳转链接和地标;确保足够的颜色对比度;使用语义化结构如 header、nav、main、article、footer,避免无意义的 div 堆叠。

必要用法示例(保持原样):按钮可用 aria-label="Close dialog";导航可用 aria-label="Main navigation";输入框可用 aria-describedby="email-error";提示可用 role="alert" aria-live="polite"。模态框可添加 role="dialog" aria-modal="true" tabIndex={-1},并监听 Escape 键关闭;焦点管理可查询 button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]) 中的首个可聚焦元素并调用 focus()。

适用场景:设计 UI、实现组件、进行无障碍合规审查、开发需要该专长的功能时。

限制:资料未提供具体安装命令、版本要求、收费方式、平台支持范围与效果保证;缺失事实暂未提供。