去年六月欧盟的《无障碍法案》（EAA）正式生效，面向欧盟市场的商业网站，达不到无障碍标准是要担法律责任的。这个事在国内关注的人不多，但对做外贸站、跨境电商的同行来说，影响是实打实的。我认识一个做欧洲市场的朋友，今年年初就把整站的无障碍改造列进了排期，他说了一句让我印象很深的话：以前这是加分项，现在是必答题。
就算不做欧洲生意，无障碍设计也值得做。全球大约有13亿人存在不同程度的残障，屏幕阅读器用户、只能键盘操作的用户、色弱用户，这些人的体验决定了你网站的覆盖面。而且很多无障碍优化跟SEO是重合的，比如清晰的标题结构、图片的alt文本，两个目的都服务。
先做一次无障碍体检
改造之前先体检，别凭感觉。免费的工具有两个够用：一个是Chrome自带的Lighthouse，跑一次性能测试顺便就把无障碍分数出了；另一个是axe DevTools插件，能给出具体的元素级问题清单，比Lighthouse更细。我拿自己一个老站跑了一遍，满分一百只得了六十二分，问题清单拉出来二十多条，大部分是重复的小问题。
体检报告里最常见的三类问题：对比度不足、缺少alt文本、表单没有label。这三类占了问题的八成，先把它们清掉，分数能直接拉到八十五分以上。
对比度不是玄学，是有数字的
颜色对比度是最好改的一项，标准也很明确：正文文字和背景的对比度至少要4.5:1，大号文字可以放宽到3:1。别信自己的眼睛，肉眼看着清楚不代表达标，拿工具量一下最靠谱。WebAIM的在线对比度检查器就够用，输入两个颜色值，直接告诉你过没过。
我踩过一个坑：设计稿里用的浅灰文字，设计师觉得好看，一测只有2.8:1，完全不及格。后来把灰色调深了一档，视觉上差别不大，分数直接上去了。这种改动成本极低，收益却很实在，尤其是对色弱用户，浅灰文字基本等于隐形。
键盘能走通全站才算及格
屏幕阅读器用户基本靠键盘操作，所以无障碍的核心标准之一，是只靠键盘就能完成网站上的所有操作。测试方法很简单：把鼠标拔了，用Tab键在页面里走一遍，看焦点能不能按可见的顺序移动，能不能看到明显的焦点框，弹窗能不能用Esc关闭。
最常见的翻车点是自定义下拉菜单和弹窗。很多前端组件库默认支持键盘，但如果你自己写了交互，很容易忘了处理键盘事件。我的经验是：凡是自定义的交互组件，上线前必测三件事——Tab能不能进去、方向键能不能选择、Esc能不能退出。
表单和图片的细节别偷懒
表单的无障碍主要靠label。每个输入框都要有对应的label标签，而且label的for要跟输入框的id对上，光有placeholder是不够的，屏幕阅读器读不到。图片的话，装饰性图片用空alt，有意义的图片写描述性alt，别把alt当成关键词堆砌的地方，那是两码事。
最后提醒一句：无障碍不是一次性工程，每次上新功能都要重新过一遍。我现在的做法是把无障碍检查写进发布流程，Lighthouse分数低于90就不允许上线。半年坚持下来，网站的访问数据里，使用屏幕阅读器的用户比例涨了一倍，他们停留的时间也更长了。这事不用等政策逼你，早做早受益。
还木有评论哦，快来抢沙发吧~