SuperAPI AI 工具集

building-accessible-interfaces

通用与其它

查看项目

更新于 10-16 03:13

技能介绍

用途:在构建或审计任何 Web UI 时提供无障碍(a11y)实践指导,目标为 WCAG 2.2 Level AA。核心原则是原生语义 HTML 默认即可访问,每叠加一层自定义都需自行承担其无障碍责任;存在原生元素时不要自造控件。

主要能力:按语义、键盘、可访问名称、对比度、表单、动态内容、动效与目标、验证八项清单展开。语义部分给出元素选择表(链接用 <a href>、动作用 <button>、弹窗用 <dialog> 等)、地标与标题层级要求;键盘部分说明 Tab/Enter/Space/Esc/方向键行为、roving tabindex、:focus-visible 焦点样式与焦点管理;名称部分强调每个控件需可访问名称、装饰图 alt=""、图标按钮加 aria-label;对比度要求正文 4.5:1、大字与 UI 边界 3:1;表单要求 label、aria-describedby 关联错误、aria-invalid;实时区域区分 polite 与 role="alert",且元素须预先存在于 DOM;动效需尊重 prefers-reduced-motion,目标尺寸至少 24×24 CSS px。另含 ARIA 五规则与 Dialog、Disclosure、Tabs、Toast、Combobox 组件模式。

使用方式:按清单逐项检查;验证需三步——自动化扫描(如 npx @axe-core/cli http://localhost:5173 --exit、npx lighthouse http://localhost:5173 --only-categories=accessibility --view,或在 Playwright 中注入 axe-core)、无鼠标键盘走查、以及用 VoiceOver/NVDA/Orca 实际屏幕阅读器测试。

适用场景:Web 前端开发、UI 审计、组件库与设计系统建设。

限制:自动化工具仅能发现约 30%–40% 的问题,必须配合人工键盘与屏幕阅读器验证;Combobox 等复杂模式建议使用成熟库而非手写。资料未提供具体收费、平台支持范围或效果数据。