无障碍(A11y)检查清单
对比度、键盘、语义与表单的 12 项检查
REFERENCE · 12 ROWS
| 检查项 | 标准 | 做法 |
|---|---|---|
| 正文对比度 | ≥ 4.5:1 | 用对比度工具验证 |
| 大字对比度 | ≥ 3:1 | 18.66px 粗体或 24px |
| 键盘可达 | 全部可操作 | Tab 顺序合理 |
| 焦点可见 | 明显焦点样式 | 不要 outline: none |
| 图片 alt | 有意义描述 | 装饰图用空 alt |
| 表单标签 | label 关联 | 不要只用 placeholder |
| 错误提示 | 文本说明 | 不只靠颜色 |
| 语义结构 | 标题层级正确 | main/nav 齐全 |
| 语言声明 | html lang | zh-CN |
| 动效 | 尊重 reduced-motion | 媒体查询 |
| 触控目标 | ≥ 44 × 44px | 移动端 |
| 链接文字 | 可独立理解 | 不要只写“点击这里” |
HOW TO USE
怎么用无障碍(A11y)检查清单
- 打开无障碍(A11y)检查清单,表格已按主题整理好。
- 在右上角输入关键词可即时筛选,不用上下翻找。
- 需要写文档时点「复制为 Markdown」,直接粘到笔记里。
无障碍(A11y)检查清单是什么
对比度、键盘、语义与表单的 12 项检查。无障碍(A11y)检查清单按表格整理 12 条常用对照,打开即可查,无需翻文档。
它属于「参考速查」下的「速查表」分类。命令、语法、快捷键的常用速查。 同类工具还包含 HTTP 请求方法对照表、Git 常用命令速查、正则表达式语法速查 等,可以在分类页一次看全。
适用场景
- 处理与「无障碍」相关的任务时可以直接用。
- 处理与「a11y」相关的任务时可以直接用。
- 处理与「对比度」相关的任务时可以直接用。
- 处理与「键盘导航」相关的任务时可以直接用。
表格说明
本表共 12 行 3 列,内容按常用程度排序。 表格支持关键词筛选,复制出的 Markdown 可直接用于文档、Wiki 或技术博客。
隐私说明
本工具在浏览器内运行,输入内容不会发送到服务器,也不会被记录。 关闭或刷新页面后,输入即被清空。