你可能会说
这个页面用键盘走一遍，看看哪儿卡住了
让屏幕阅读器和键盘用户也能用好你的页面
大白话解释
无障碍是让看不见、不方便用鼠标、或者眼神不好的用户也能正常使用你的产品。最基础的一步是给图片配上文字说明，让读屏软件能把内容念出来。
像商场里除了台阶还留着坡道和盲道，走台阶的人不受影响，坐轮椅的人也能进得来。做产品也是这个理。
它照顾的不只是少数人。老花眼、临时手受伤、地铁上光线太暗，这些时候谁都会临时变成「不方便的用户」。
什么时候会遇到
- 公司被用户投诉网站读屏用不了，或者接政务、金融项目被要求过无障碍标准。
- 图片、纯图标按钮点上去没有任何文字，读屏用户只听到「按钮」两个字。
- 键盘按 Tab 在表单里跳，跳着跳着跑出屏幕或者卡住不动。
- 文字颜色太浅，对比度不达标，眼神差一点的人根本看不清。
- 弹窗打开后焦点没锁住，还能 Tab 到背后的页面上去。
- 上线前用工具跑分，无障碍那一栏飘红。
可以直接对 Agent 说
「帮我检查 src/components 下所有组件，找出缺图片说明的写法、没有可读文字的纯图标按钮、以及只靠颜色区分的状态提示，列出来再逐个修掉。」
「这个弹窗打开后键盘焦点还能跑到背后的页面上。帮我加上焦点限制，按 ESC 能关闭，关闭后焦点回到原来那个按钮。」
「用键盘把整个下单流程走一遍，从选商品到提交订单，检查每个可点元素能不能 Tab 到、有没有清楚的聚焦边框、读屏能不能念出它是干什么的，有问题的列给我。」
正文里带下划线的词，是本站其它词条的入口；这一篇自动链了 3 个相关术语。
最容易想岔的地方
常见的错误理解： 无障碍是给视障用户做的特殊版本，要额外做一整套
更准确的理解： 它主要靠把现有的东西写对 —— 图片写说明、按钮写清楚名字、颜色对比够。真正额外要做的部分很少
常见的错误理解： 标签写不写、键盘能不能操作，等上线前再补
更准确的理解： 这些都是结构问题，事后补等于重做一遍页面。而且键盘不能操作，很多正常用户换个输入方式也会卡住
测一下：真遇到了你会怎么处理
单选 · 选完立刻看解释
你做的表单为了好看，只用 placeholder 提示每个输入框要填什么，没有 label。
这会带来什么问题？
-
placeholder 一开始输入就消失了，而且读屏不一定会念它。它不是标签的替代品。
-
这是功能缺失，不是审美问题 —— 一部分用户直接没法完成这个表单。
-
影响的是使用辅助技术的人，跟浏览器新旧无关，新版浏览器上问题一样存在。
题目只考「这个场景下的第一反应」，不考名词背诵 —— 无障碍的定义在上面已经讲过了。