SuperAPI AI 工具集

accessibility

前端与建站

查看项目

更新于 10-16 05:42

技能介绍

用途:提供 Web 无障碍(a11y)最佳实践,帮助开发者按 WCAG 2.1 AA 标准实现可被所有用户(含使用辅助技术者)访问的界面。核心原则为 POUR:可感知、可操作、可理解、健壮。

主要能力:语义化 HTML(正确元素、标题层级、地标区域)、图片替代文本(信息图、装饰图 alt=""、复杂图配 figcaption)、音视频字幕与音频描述、表单标签与字段集、错误提示(aria-invalid、aria-describedby、role="alert")、键盘导航与焦点管理(:focus-visible、跳过链接、自然制表顺序)、ARIA 角色与状态(tablist、aria-expanded、aria-current、aria-busy)、实时区域(aria-live polite/assertive)、颜色对比(正文 4.5:1、大字 3:1、UI 组件 3:1)以及不依赖颜色单独传达信息。

使用方式:作为开发时的参考规范嵌入编码流程;建议键盘纯操作遍历交互元素、用 VoiceOver(macOS Cmd + F5)与 NVDA 等屏幕阅读器测试、做 200% 与 400% 缩放检查并用对比度检查器验证。可结合自动化工具:npm 命令 npx @axe-core/cli https://example.com、npx lighthouse https://example.com --only-categories=accessibility、npx pa11y https://example.com。React 场景可用 useRef 管理焦点,弹窗用 role="dialog" aria-modal="true" 并设 tabIndex={-1}。

适用场景:前端页面、表单、导航、视频组件及 React 组件库的无障碍改造与审核。

限制:本资料为实践指南而非产品,未提供收费、平台、项目仓库结构或版本支持等信息;剂量与合规判定仍以实际测试为准,缺失事实暂未提供。