做页面只顾好看不行：无障碍这关早晚要补
无障碍这块平时没人催，等到要过验收或者被用户投诉了才发现处处是坑：对比度不够、只用颜色区分状态、键盘走不完一遍流程。这个站点把无障碍拆成检查清单、常见模式和排错短文三部分，照着逐项对，比通读规范原文好入口得多。
它解决什么问题
无障碍规范条文多又抽象，看完不知道具体该改页面哪一处。
想自查却不知道从哪一项开始，改动零散还不确定有没有用。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| 检查清单 | 按页面要素列出常见问题，可逐项对照排查 |
| 常见模式 | 按钮、表单、导航这些组件给了可参考的做法 |
| 短文排错 | 围绕具体问题讲原因与改法，篇幅都不长 |
| 术语说明 | 对刚接触无障碍的人有基本概念的解释 |
| 社区维护 | 内容公开协作，发现问题可以提反馈 |
| 免费阅读 | 不需要注册，也没有付费墙 |
先拿清单自查，再补概念
别一上来就通读规范。更有效的做法是先挑手上正在写的那个页面，打开清单从头往下过一遍，每遇到一条不理解的再点进对应文章看解释。这样每条都能立刻落到代码上，比如发现输入框没有关联标签，顺手就改掉了；当天改完再用键盘走一遍主要流程，看看能不能从头到尾操作完。
它讲的是通行做法，不等于项目一定合规：具体标准条文和验收口径要看所在团队或客户的要求。清单里的条目也需要判断，有些写法在当下的浏览器里其实已经不是问题。英文读着吃力可以配合翻译逐条看，重点是把写完页面顺手检查一遍变成习惯，而不是把清单背下来。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| MDN Web Docs | 开源免费 | 查语义标签与属性的权威参考，动手时用来核实 |
| web.dev | 官方免费资源 | 有专门的文章与课程讲可访问性实践 |
| DevDocs | 开源免费 | 把多份文档合成一个界面，查属性时比翻文章快 |
谁适合用
- 做前端、需要对页面质量负责的开发者
- 收到无障碍整改要求却不知从哪下手的人
- 写组件库、想让默认实现就照顾到更多用户的工程师
怎么开始
- 打开站点，先找到检查清单，看它分成哪几类。
- 挑一个自己负责的页面，按清单逐条对照排查。
- 遇到不理解的条目，点进对应文章看原因和改法。
- 改完用键盘和读屏工具走一遍主要流程，确认可用。
- 把常犯的几条记下来，写新页面时提前避开。
常见问题
内容要付费吗？
不用，文章与清单都免费开放，也不需要注册。
有中文吗？
正文以英文为主，可借助浏览器翻译，是否有中文内容以站点实际为准。
看完就合规了吗？
不能保证。清单是自查工具，最终以项目适用的标准与验收要求为准。
不做无障碍可以吗？
要求高低因项目而异，但只用键盘就操作不完的页面，确实会挡住一部分用户。
授权与合规
站点内容在 GitHub 上以开放许可维护，文章、检查清单与示例均可免费阅读，也欢迎社区提交补充。 官网：www.a11yproject.com。
继续找同类资源
这条属于「学习资料」栏目，同栏目还有更多可直接使用的免费资源，可以在 学习资料全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
资源信息
界面语言
英文
授权方式
开源免费
适用平台
Web
获取方式
直链下载
资源更新
2026-09-20
页面更新
2026-09-20
↓ 获取资源
点击按钮直接前往资源页面。
