无障碍小屋

让页面被看见，也被听见。这里放我这些年做网页无障碍改造的实践、组件和笔记，也放一点日常。

WCAG 自查

语音朗读

焦点可见

语义结构

关于我

住在广州的网页开发者，做无障碍改造，也做前端工程。

你好，我是谭进茂。第一次意识到无障碍这件事，是帮一位视障朋友调试读屏软件的时候——我写的页面在另一双耳朵里，按钮没有名字，图片没有说明，点完链接之后焦点不知道跑到哪里去了。那一刻我才明白，同一个页面，别人听到的和我看到的完全是两回事。

后来我把无障碍放到了开工清单的第一行，而不是上线前才补的作业。现在主要做两件事：一是帮团队把已有站点按 WCAG 逐条梳理出来，落到一份能直接排期的清单；二是和自己的小组一起维护一套纯手写的无障碍组件，按钮、对话框、标签页，全部键盘走通、焦点可控。无障碍小屋就是这间放工具和笔记的小房间。

除了写代码，我也喜欢把这些年踩过的坑讲给更多人听：一场四十分钟的读屏入门分享，通常能让一屋子人对「可访问性」有完全不同的体感。

围绕一个目标：让不依赖鼠标、不依赖视力的人，也能把页面完整走一遍。

梳理语义化结构与可访问名称，补齐必要的 ARIA 标注，让 VoiceOver、NVDA、TalkBack 都能把页面读明白。

整理焦点顺序与跳过导航，保证每个交互只用 Tab、方向键和回车就能完成，焦点环永远看得见。

核对文本与背景的对比度，处理字号放大到 200% 后的换行、截断和重叠，让弱视用户看得舒服。

按 WCAG 2.2 AA 逐条自查，输出一份能直接排期的修改清单，标明影响面、优先级和验收方式。

一些做出来的东西，和一些还没做完的东西。

聊无障碍改造、组件协作或者一场分享，都欢迎直接找我。

如果你正在为站点的无障碍整改找思路，来信时附上页面地址和主要使用场景，可以先给你一版初步的判断。