无障碍 a11y 与语义化 | 手帐 Blog

目标：表单 / 弹层能键盘用；懂焦点、ARIA、对比度基本要求；有一份自检清单。

1. 背景与目标

a11y 不是「加分装饰」，是更多人能用、也减少交互 bug。面试常考：模态框焦点陷阱、按钮语义。

2. 核心概念

主题	默认做法
语义化	按钮用 `<button>`，标题用标题级，别全是 `div` + 点击
焦点可见	不要无脑 `outline: none`；自定义焦点环
键盘	Tab / Shift+Tab / Enter / Esc 走得通
ARIA	先语义 HTML；不够再 `aria-*`；错误角色比没有更糟
对比度	正文与背景达到可读对比（参考 WCAG AA）

弹层要点：打开时焦点进入；Tab 困在层内；Esc 关闭；关闭后焦点回触发器。

3. 最小实践：弹层检查

对现有 Modal / Popup：

[ ] 角色：dialog 或组件库等价实现
[ ] aria-modal / 标题关联 aria-labelledby
[ ] 打开后焦点到首个可聚焦控件或容器
[ ] Esc 关闭
[ ] 关闭后焦点回到打开按钮
[ ] 遮罩点击关闭策略与键盘一致且可预期

表单：

[ ] <label> 关联控件
[ ] 错误信息与字段 aria-describedby
[ ] 禁用提交有明确说明

4. 踩坑与取舍

只测鼠标：键盘一塌糊涂。
乱用 aria-label 覆盖可见文本：读屏听到重复或矛盾。
小程序 / Canvas：能力受限，关键操作要有可访问替代（见 11、22）。
对比度跟风浅灰字：好看但读不动。

5. 验收清单

[ ] 一个弹层完成键盘与焦点自检
[ ] 能口述「何时用 ARIA、何时先改标签」
[ ] 抽查一页对比度（插件或 DevTools）
[ ] 修掉至少一处 div 假装按钮

6. 下一步

→ 17 · 国际化 i18n

参考链接