你是不是也遇到过：辛辛苦苦写完一篇干货，配好图、调好排版，结果朋友发来一句：“你这网站，我用键盘根本点不到提交按钮……”
或者更扎心的——“我开了朗读功能，结果全程听到的都是‘图片’‘图片’‘图片’。”
别急着怪用户。问题大概率不在他们身上，而在你没关掉的那个“无障碍开关”。
中国有超千万视障朋友在用屏幕阅读器上网；还有更多人，只是临时手受伤、在地铁里静音刷手机、网速卡到只加载出文字……他们不是“特殊群体”，就是你昨天刚聊过天的同事、客户、粉丝。
而且 Google 真的会看这个——可访问性差的页面，再漂亮的 SEO 优化，也像往筛子里倒水。
你网站上的图片，盲人用户怎么看？
很多人以为给图片加个 alt 就算交差了。但现实是：大量 alt 写得跟没写一样。
比如电商首页轮播图，全写着“banner1”“banner2”——对屏幕阅读器来说，等于反复念“空白”“空白”“空白”。
真实案例：一个卖手工陶器的小站，博主把所有产品图的 alt 换成了“拉坯成型的青釉茶杯，口径8cm，底部有手刻落款”。改完一周后，来自读屏用户的停留时间明显变长，跳出率也降了一截。
你该怎么做：
- 装饰性图片（比如分隔线、小图标）直接写
alt=""，别让阅读器念废话。 - 内容图片，试试这样写：主体 + 动作/状态 + 关键视觉特征（颜色/纹理/场景）+ 它为什么值得被看见。
- 功能图标（比如放大镜、购物车）的
alt，要写清作用，比如“搜索商品”“打开购物车”，而不是“放大镜图标”。
你的视频和音频，聋人和听障用户真的能看懂吗？
现在谁还不做视频？但如果你只丢一个 .mp4 文件上去，等于把听障用户、老人、地铁党全挡在了内容门外。
真实案例：一个专注前端教学的博客，给每期视频手动加了字幕，并把逐字稿贴在文章下方。没多久就发现，不少用户是从“JavaScript 异步处理”这类长尾词点进来的——那些词，原本只藏在视频声音里，从没出现在网页文本中。
你该怎么做：
- 视频必须带准确字幕。YouTube 自动字幕可以当草稿，但一定要校对错字和断句。
- 音频内容（比如访谈、课程录音），把文字稿直接放在页面正文里，别塞进
<meta>或隐藏区域。Google 会读它，用户也会搜到它。 - 直播暂时做不到实时字幕？至少录完后补上。哪怕晚半天，也比没有强。
键盘用户在你网站上能顺畅地“走”完流程吗？
你可能从来没想过：有人从来不用鼠标。可能是视障用户靠 Tab 键导航，可能是程序员习惯键盘操作，也可能只是今天手腕扭到了……
但很多网站一按 Tab，焦点就乱跳：从标题直接蹦到页脚，中间跳过整个导航栏；注册表单里，Tab 到邮箱就没了，密码框压根不出现。
真实案例：一家做在线设计工具的公司，用户反馈“注册总失败”。技术一查才发现：Tab 顺序是邮箱 → 国家下拉 → 协议勾选 → 提交按钮，唯独漏掉了密码框。修复后，客服收到的同类咨询少了大半。
你该怎么做：
- 亲自试一次：关掉鼠标，只用 Tab、Shift+Tab、Enter 和方向键，走一遍注册、搜索、下单流程。
- 确保每个可聚焦元素都有清晰的焦点样式（比如蓝色边框或阴影），别让它“隐身”。
- 不要用
tabindex="1"这类正数强行干预顺序。默认 DOM 顺序最靠谱；实在需要调整，用tabindex="0"让元素自然进入流。
你的颜色对比度，是不是在让用户“睁眼瞎”？
设计师爱用浅灰字体配白底，觉得高级。但对色弱、老花、甚至只是阳光下看手机的用户来说，那行字就是一团模糊的灰雾。
WCAG 标准不是摆设：普通文字和背景对比度至少得 4.5:1，大号字（18px+）也要 3:1。不是“差不多就行”，是真有人靠这个看清世界。
真实案例：一个旅行攻略号，正文长期用 #999 浅灰。有位读者留言说：“我开辅助功能后，整篇像隔着毛玻璃读。”换成 #333 后，不仅他读完了全文，连带着页面平均停留时长也拉高了不少。
你该怎么做：
- 打开浏览器开发者工具，右键检查文字元素，用自带的“颜色对比度”预览功能快速扫一遍。
- 重点看正文、链接、按钮文字——这些地方最容易偷懒。
- 如果品牌色确实太浅，要么加大字号（18px 起步），要么加粗，要么干脆把它用在图标、装饰线上，正文老老实实用深色。
你的表单和提示，是不是在“考验”用户的记忆力？
“输入无效”“验证失败”“请重试”……这种提示，等于告诉用户：“你错了，但我不告诉你哪错了。”
对认知障碍者、老年人、非母语用户来说，这不是体验问题，是门槛问题。
真实案例：一个教烘焙的课程平台，登录页报错只在顶部弹个红框。用户反复输错密码，又找不到原因。改成在密码框下方直接写“密码需包含大小写字母和数字”，注册成功率立刻上去了。
你该怎么做：
- 错误提示必须紧挨对应字段，别堆在页面顶上。
- 写清楚“哪里错”和“怎么改”，比如“手机号少一位”“验证码已过期，请重新获取”。
- 倒计时、限时优惠这类关键信息，别只靠动画。加一行文字：“优惠剩余 2 小时 30 分钟”，稳得多。
今天就能做的1个操作：打开 Chrome，跑一次 Lighthouse
不用装插件，不用注册新账号——就是你现在正在用的 Chrome 浏览器。
- 打开你的网站
- 按
F12→ 点顶部的 Lighthouse 标签 → 勾选 Accessibility → 点 Analyze page - 等十几秒，你会看到一份带截图的问题清单，比如：“按钮缺少可访问名称”“链接无描述性文本”
挑第一个标红的严重问题，现在就改：
✅ 给轮播图补上 alt="春季新品发布会现场，主讲人手持陶瓷样品讲解工艺"
✅ 给购物车图标加上 aria-label="查看已选商品"
✅ 把注册表单的错误提示从顶部弹窗，挪到邮箱框下方
改完刷新，再跑一次。你会发现：不只是残障用户更顺了，连你自己点起来都更顺了。
现在就去，别等明天。