媒体网站无障碍设计：9个架构师忽视的关键适配点

　　去年过年时，我蹲在阳台喂猫，手机弹出一条盲人用户投诉邮件——说我们刚上线的视频聚合页，VoiceOver读不出字幕开关在哪。我盯着那封信看了三分钟，突然想起一三年冬天，老张在机房抽烟，烟灰掉进UPS散热口，整层楼断电四十七分钟。他边擦汗边说：“架构师？不就是把页面塞进IE6里还能跑？”那时我们真信这话。

　　一七年改版，全站切React，UI组画了三百多张高对比度线框图，我拍板砍掉所有自定义滚动条——说“原生控件才最可靠”。结果上线第三天，听障同事李薇发来截图：弹幕开关图标旁那个红色感叹号，色值#E53E3E，和背景灰#F7FAFC的对比度只有2.8:1。WCAG要求4.5:1。我让她截屏发给设计，她回：“刘工，我用的是NVDA，不是眼睛。”我愣住。那台放在茶水间角落的戴尔2407WFP显示器，屏幕右下角有道永远擦不净的浅灰划痕——现在想不起牌子了，只记得它当年总在下午三点十五分自动黑屏十秒，像在抗议什么。

　　二二年备案收紧那会儿，我带三个新人搭无障碍检测管道。他们翻W3C文档翻到凌晨，用axe-core扫出两千多条warning，我手抖删掉一半——说“优先修影响发声的”。第二天运营催着上线春节专题，我把“跳过导航”链接塞进页脚最右侧，代码缩进错两格。没人提。可两周后收到个微信，是早就不做前端的老马发来的语音：“你记得不？咱一三年做的那个本地论坛，连图片ALT都手写‘图片’俩字……现在你们搞的‘无障碍开关’，藏在三级菜单里点五次才能开，还默认关闭。”我听完没回，把微信语音转文字又删了——转出来的字是“你记不……”，后半截乱码。

　　风扇还在响。那间朝北的小屋，空调外机震得窗框嗡嗡颤，我一七年租下来的。现在早退了，但去年底去老楼取硬盘，推开门第一眼还是找那扇漏风的玻璃——没找到，墙皮铲了重刷过，但地板缝里还嵌着几粒干掉的烟丝，可能是老张留下的。

文章配图，仅供参考

　　说到李薇……她去年跳槽去了残联信息中心。前两天朋友圈晒她孩子画的全家福，爸爸举着导盲犬，妈妈手里攥着手机，上面贴着放大镜贴纸。我没点赞。倒不是不想，是点完“赞”的瞬间，手机弹出提示：“当前操作不可被辅助技术识别”。这破系统还没适配Color Contrast Analyzer插件。我们自己产的工具，先把自己人坑了。

　　老马后来去教老年大学编程课。上周听朋友说，他带着学员用Python爬我们站的新闻摘要——不为商用，就教老人怎么用JAWS读出标题日期。我偷偷查了爬虫UA，确实是“MSIE 6.0; Windows NT 5.1”，他还在模拟老版本IE。笑出声。可笑着笑着停了：我们二二年上的云WAF，自动屏蔽了所有User-Agent含“MSIE”的请求。他爬了三天，一页没抓下来。我没联系他。也没改规则。

　　还有个事儿，忘说了：一三年那版论坛，后台编辑器有个“插入图片”按钮，点开弹三层iframe，每层都缺title属性。老张调试时骂了一句，随手在源码里塞了个title="插入图片"——他当时不懂这是HTML4标准里的强制项，纯粹嫌烦。二二年重构CMS，我亲手把这句删了，说“现代框架自动处理语义”，结果测试那天，轮椅用户王师傅打电话来，说“那个小窗口一开就卡死，键盘Tab键按到第七下突然跳出‘未定义错误’”。我查日志，发现他用的是一款国内小厂读屏软件，不兼容Shadow DOM。而我们整个构建链路，从Webpack到Vite，早忘了怎么给iframe塞title。我盯着控制台里那一长串黄色警告，想起老张蹲在机柜前擦汗的样子——烟味混着臭氧味，风扇在头顶嘶吼。

　　对了，那个走错的步子，就在这儿：一七年上线前，我否了第三方无障碍服务接口方案，觉得“自研才可控”。现在看，是怕丢面子。更怕别人说“连个无障碍都要买”，好像架构师的手艺该能焊透所有盲文点字。结果呢？自研的语音反馈延迟固定800毫秒，比竞品慢3倍；而我们引以为傲的“一键高对比度”开关，背后用了七层CSS变量覆盖，加载失败时全站变白屏。去年十一月紧急回滚，凌晨两点我在公司，泡面汤洒在键盘上，Ctrl+S的手指头都在抖。

　　现在这套我也拿不准还能干几年。

（编辑：均轻资讯网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!