无障碍
Accessibility也常被叫作：可访问性无障碍访问a11y辅助功能给残障人士用
「让我的网站不只靠鼠标能用，键盘、读屏、还有色弱的用户也能用。」
无障碍 Accessibility
让网站不依赖某一种输入或感官也能被所有人使用的一套标准。
无障碍不是「给残障人士单独加的功能」，而是让网站不绑死在某一种用法上。你只用鼠标，说明不了别人也能用。最常见的三类缺口：键盘——有人不用鼠标，得靠 Tab 键在页面上走；读屏——有人看不到画面，靠软件把屏幕上的文字念出来；对比度——有人色弱或近视，浅灰字配白底他根本看不清。
判断网页是否无障碍，最朴素的标准是「不靠看、不靠点」能不能用。比如：一个图标按钮只有图没有文字，看得见的人知道它是干嘛的，读屏软件念出来可能只是「按钮按钮」，用户完全不知道点了会怎样。又比如对比度不够的文字，视觉正常的人觉得挺精致，色弱的用户直接错过。
好消息是，大量无障碍问题你自己就能初步验：不用鼠标，只用键盘能不能把所有操作走一遍？把窗口缩小或把字放大，内容有没有挤没、重叠？文字和背景颜色是不是一眼能分清？这三招不花一分钱，就能挡住大半的坑。
长什么样 真实可交互，不是截图
读屏软件听到的，不一定是你看的
<button aria-label="删除这条评论">🗑</button>
那个 aria-label 就是给读屏听的「名字」。图标按钮不给名字，看得见的人能猜，读屏用户只能听见「按钮」。
拆开看，里面有这几块
-
1
键盘操作 Keyboard
不用鼠标，只靠 Tab / 回车 / 方向键能不能走通全部操作。是第一步，也最常见。
-
2
对比度 Contrast
文字和背景的颜色差异。差到色弱、近视看不清，就是问题。
-
3
文字替代 Alt text
图片的替代文字，读屏用来念出图片内容。纯装饰图则要明确忽略。
-
4
可放大 Zoom / Resize
把字放大、窗口缩窄，内容不消失、不重叠、按钮不挤坏。
容易搞混？这样区分
浏览器适配是让页面在不同浏览器里显示正常；无障碍是让不同人群能用。会出现在每个浏览器里的通用问题才更要紧。
什么时候用得上
把所有 Tab、点击的聚焦动作走一遍，是每版上线的底线自检。
纯图标按钮一定补一个能念的名字（aria-label），否则读屏用户听到的只有「按钮」。
文字和背景能一眼分清；浅灰大字配白底基本是坑。
你可以这样跟 AI 说
直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。
【范围】只检查 [这个页面] 的可访问性，不重构 【目标】按下面三条逐项检查并修： 1. 键盘：不用鼠标，只用 Tab 和回车能把页面主要操作全部走一遍，每个聚焦有可见的框 2. 文字替代：所有有意义的图片有替代文字，纯装饰图明确忽略 3. 对比度：正文和背景色差异够大，色弱用户能看清 【边界】不要改动布局和配色风格；不要动业务逻辑；不要为了「通过检查」塞满无意义的 aria 标签 【交付】逐条告诉我哪条本来通过、哪条改了、改成什么样，以及我怎么用键盘和读屏复现验证
这条要 AI 按「键盘 / 文字替代 / 对比度」三项给逐条结论，而不是笼统说「已优化」。还特意拦了「塞一堆无意义 aria 标签」这种装样子的做法。
它说「做好了」，你怎么自己验
这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。
要亲眼看到这些，才算数
- 关掉鼠标，只用键盘：Tab 能走到每个可操作元素，聚焦有可见边框，回车能触发，走完一遍不出乱子。
- 对着一个纯图标按钮，问「它的名字是什么」，确认有文字可念。
- 把文字和背景放一起看，一眼能分清，不是浅灰叠白底。
- 把浏览器窗口缩到手机宽度、把字放大，内容没挤没重叠没被裁掉。
- 有视频的页面，确认有关键内容的字幕。
它常这么糊弄你
- 「无障碍已做好」——但你只用键盘一划，发现根本 Tab 不到某处。这招当场拆穿。
- 装了个无障碍插件就宣布完成。插件图标是红的，不代表页面能键盘走通。
- 给纯装饰图标也加了标题，说「很全」。该忽略的没忽略，反而让读屏用户听一堆废话。
- 用一堆假 aria 标签填满页面，说「通过了检查」。标签数量和真正能用是两回事。
这一条能做「主路径」层：关掉鼠标用键盘走一遍、放大窗口看会不会坏，这些都是真实用户会碰到的正常操作，而且你自己就能验。
考考你 选一个你觉得对的
有人和你说「这个网站做了无障碍优化」。怎么最快地当面验证一句？
A 直接还原真实用户最基础的使用方式，键盘走不通就是没过。B 的框架名字毫无意义，C 的标签数量代表不了可用性，D 跟无障碍完全不沾边。