SuperAPI AI 工具集

accessibility-wcag

前端与建站

查看项目

更新于 10-15 18:45

技能介绍

该技能用于在前端开发中强制遵循 WCAG 2.2 无障碍标准,适用于创建 UI 组件、审查前端代码以及检测到无障碍问题时。资料提到 WCAG 2.2 已于 2023 年 10 月成为 ISO 标准(ISO/IEC 40500),欧洲无障碍法(EAA)自 2025 年 6 月起施行。

核心原则为 POUR:可感知(替代文本、字幕、颜色对比)、可操作(键盘访问、充足时间)、可理解(清晰语言、可预测行为)、健壮(辅助技术兼容)。主要规则包括:使用语义 HTML;为图片提供有意义的 alt,装饰性图片用空 alt 加 role="presentation";保证键盘访问,自定义元素需 role、tabIndex 与 onKeyDown;保留清晰的焦点样式;颜色对比需满足 AA(一般文本 4.5:1,大文本 3:1,UI 组件/图形 3:1);表单需显式 label 或 aria-label;正确使用 ARIA 角色与属性(如 dialog、alert、aria-busy);提供跳过链接。

WCAG 2.2 新增标准包括 2.4.11 焦点不被遮挡(AA,可用 scroll-margin 留出空间)、2.5.7 拖动操作需提供按钮替代(AA)、2.5.8 目标尺寸(AA 至少 24x24px,建议 44x44px)。

测试工具方面,资料给出安装命令:npm install @axe-core/react;npm install eslint-plugin-jsx-a11y --save-dev;npm install -g @lhci/cli 后运行 lhci autorun。ESLint 可继承 plugin:jsx-a11y/recommended 并启用 alt-text、anchor-is-valid、click-events-have-key-events、no-static-element-interactions 等规则。另有手动测试清单:仅键盘可用、Tab 顺序合理、焦点可见、屏幕阅读器可理解、200% 放大不丢内容、不单靠颜色传递信息。工作流覆盖组件编写检查与代码复查要点。未提供具体收费、平台限制等信息。