用途:在构建 UI 组件、表单或任何面向用户的界面时使用,建议在每个前端 PR 前对照检查,属于前端无障碍(accessibility)实践清单,不是可安装的工具或库。
主要内容:键盘导航方面,要求所有交互元素可聚焦,按钮天然可聚焦,非按钮元素需加 role 与 tabindex;焦点需可见且不被遮挡(WCAG 2.2)。屏幕阅读器支持方面,图片需有有意义的 alt,装饰性图片用空 alt;表单输入需有关联的 label,而不是用 placeholder 替代;动态内容可用 aria-live 与 aria-busy 标注。ARIA 要点包括为无文本按钮加 aria-label、为展开/折叠控件加 aria-expanded 与 aria-controls、模态框使用 role="dialog"、aria-modal 与 aria-labelledby 等。
反模式:仅用颜色作为指示(应加图标或文字)、缺少表单标签、触摸目标过小(小于 44x44px)、键盘陷阱(无法用 Tab/Escape 退出)、自动播放且无控件的媒体、焦点被吸顶头部或模态遮挡。
验证清单:所有交互元素可用 Tab 到达、所有可聚焦元素有可见焦点指示、焦点不被吸顶内容遮挡(WCAG 2.2)、图片有有意义 alt(装饰性用 alt="")、表单输入有关联标签、颜色对比度文本至少 4.5:1、大文本至少 3:1、触摸目标至少 44x44px、尊重 prefers-reduced-motion、认证不设认知测试(避免 CAPTCHA)。
限制:资料仅提供检查要点与示例代码片段,未提供安装方式、平台范围、价格或自动化检测能力,这些暂未提供;使用时应结合具体项目的无障碍标准与人工测试。