ui-accessibility-check-checklist

汇总「UI 无障碍检查」中最容易踩的坑与必做项，提供一份可勾选清单，助你一次做对、避免返工。 **一、最容易踩的坑（常见错误）** - [ ] 忽略颜色对比度不足（文本与背景对比度低于 4.5:1） - [ ] 仅依赖颜色传递信息（如“红色表示错误”无文字说明） - [ ] 未提供替代文本（alt text）给图片、图标或装饰性元素误加 alt - [ ] 表单控件无关联标签（label），或使用 placeholder 代替 label - [ ] 键盘无法访问所有交互元素（如按钮、下拉菜单、模态框） - [ ] 焦点顺序混乱或不可见（tab order 不符合视觉流，无 focus indicator） - [ ] 动态内容更新未通知屏幕阅读器（如 AJAX 加载内容无 ARIA live region） - [ ] 使用 div/span 模拟按钮但未添加 role="button" 及键盘支持 - [ ] 视频或音频内容缺少字幕、 transcripts 或音频描述 - [ ] 页面结构混乱（缺少 heading 层级、滥用 heading 标签） **二、必做项（核心无障碍要求）** - [ ] 所有非文本内容提供有意义的替代文本（alt 属性） - [ ] 确保文本与背景对比度至少达到 WCAG AA 标准（4.5:1，大文本 3:1） - [ ] 所有表单输入项均有显式关联的 `<label>` 或 `aria-labelledby` - [ ] 页面可通过键盘完全操作（Tab、Enter、Space、Esc 等） - [ ] 焦点可见且逻辑清晰（自定义组件需实现 focus style） - [ ] 使用语义化 HTML（如 `<button>`、`<nav>`、`<main>`、`<header>` 等） - [ ] 建立合理的 heading 结构（h1 → h2 → h3，不跳级） - [ ] 为复杂组件添加 ARIA 角色、状态和属性（如 `role="dialog"`、`aria-expanded`） - [ ] 动态内容变更使用 `aria-live` 通知辅助技术 - [ ] 提供跳过导航链接（Skip to Content） - [ ] 确保所有功能在禁用 CSS/JS 时仍可通过基础 HTML 访问（渐进增强） - [ ] 测试主流屏幕阅读器（如 NVDA、JAWS、VoiceOver）下的可用性 **三、推荐检查工具** - [ ] 使用 axe、WAVE 或 Lighthouse 进行自动化检测 - [ ] 手动键盘遍历测试整个页面流程 - [ ] 使用屏幕阅读器进行真实用户场景测试 完成以上清单后打勾确认，可显著降低无障碍合规风险，提升产品包容性与用户体验。

存档时间线

版本索引永久保留；内容副本只保留最新 1 份，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本