accessibility-auditlisted

# Accessibility Audit — 无障碍审计技能 检查 Web 应用的无障碍合规性，确保所有人都能使用。 ## Goal 检查 Web 应用的无障碍(a11y)合规性，包含 WCAG 2.1 标准检查、ARIA 属性审查、键盘导航测试、屏幕阅读器兼容性 ## Trigger - 用户要求"无障碍检查"、"a11y审计"、"WCAG合规" - 需要满足无障碍法规要求 - 提升产品的可访问性 ## WCAG 2.1 核心原则 ### POUR 原则 | 原则 | 含义 | 检查重点 | |------|------|----------| | **P**erceivable | 可感知 | 文本替代、颜色对比、多媒体字幕 | | **O**perable | 可操作 | 键盘导航、时间充足、无闪烁 | | **U**nderstandable | 可理解 | 语言清晰、输入帮助、错误提示 | | **R**obust | 健壮性 | ARIA 属性、语义化 HTML、兼容性 | ## 检查维度 ### 1. 文本替代 (1.1) ```html <!-- ❌ 缺少 alt 属性 --> <img src="logo.png"> <!-- ✅ 有意义的替代文本 --> <img src="logo.png" alt="公司名称 Logo"> <!-- ✅ 装饰性图片使用空 alt --> <img src="decorative.png" alt="" role="presentation"> ``` ### 2. 颜色对比 (1.4.3) | 元素 | 最低对比度 | AAA 级 | |------|-----------|--------| | 正常文本 | 4.5:1 | 7:1 | | 大文本 (18px+) | 3:1 | 4.5:1 | | UI 组件 | 3:1 | 3:1 | ```css /* ❌ 对比度不足 */ .text { color: #777; background: #fff; } /* 对比度 4.5:1 勉强 */ /* ✅ 良好对比度 */ .text { color: #595959; background: #fff; } /* 对比度 7:1 */ ``` ### 3. 键盘导航 (2.1) ```html <!-- ❌ 不可聚焦的自定义按钮 --> <div onclick="submit()">提交</div> <!-- ✅ 可聚焦的语义化按钮 --> <button type="submit">提交</button> <!-- ✅ 自定义元素添加键盘支持 --> <div role="button" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' ')submit()"> 提交 </div> ``` **键盘操作检查清单**： - [ ] 所有交互元素可通过 Tab 聚焦 - [ ] 焦点顺序符合逻辑（从左到右，从上到下） - [ ] 焦点指示器清晰可见 - [ ] 可用 Enter/Space 激活按钮 - [ ] 可用 Escape 关闭弹窗 - [ ] 可用箭头键导航菜单/列表 -