当动画不止炫技：无障碍特效让设计被所有人看见

　　去年三月，甲方在国贸三期那间玻璃会议室里转笔转了四十七分钟。投影仪嗡嗡响，不是那种低频震颤，是高频抖动，像有人把一串钥匙塞进蜂鸣器里持续按压。桌上那盘橙子摆得齐整，果皮上还带水珠，没人碰过一口。

　　我说“动画得加无障碍支持”，他抬眼：“啥？淘宝那样不就行？”我喉咙发紧，没接话——淘宝首页那个轮播图切页时连键盘焦点都乱跳，读屏软件念的是“图片 图片 图片”，连alt文本都没有，他们管这叫“淘宝那样”。

文章配图，仅供参考

　　我原以为改个CSS的prefers-reduced-motion响应就行，结果发现他们UI给的AE源文件里压根没分层：文字、遮罩、粒子、背景全糊在一层里，导出的JSON动画用Lottie渲染时，屏幕阅读器直接卡死。试了三次，Safari崩溃两次，Edge报错堆栈里跳出“AccessibilityNode not found”，可客户还在微信问：“现在能看效果了吗？”

　　回一条微信拆成三步：先点开对话框，手指悬停两秒（怕打错字），打“稍等”，删掉，改成“正在调兼容性”，再删，最后只发了个“✓”。对方秒回：“好的，那明天上线？”

　　拖了两个月。销售小陈中途来过两次，坐我工位旁吃自热火锅，红油汤底咕嘟冒泡，他说：“哥，真不能再拖了，人家说‘三千块做个官网’怎么了？又不是让你做WebGL渲染引擎。”我盯着他泡发的粉丝，没吭声。三千块。去年三月。空调冷风直吹后颈，我后脖梗子全是汗。

　　上线那天早上八点，客户电话进来：“颜色太浅，对比度不够。”我打开DevTools调色板——#e0e0e0配#ffffff，AA级对比度2.1:1，差0.4刚好不达标。我说“得改成#9e9e9e”，他说：“哦，那加钱吗？”我嗯了一声。他笑：“哎哟你还真当真啊？”

　　电梯里遇见前公司CTO老张，他穿件起球的灰卫衣，手里拎着半袋散装瓜子。我低头按1楼，他突然说：“你们那个政府投标站，盲人测试员反馈表我都看了，三十七处焦点顺序错，六处语义标签缺失，还有俩button写成了div……”我没接话，电梯门开了，他嗑着瓜子晃出去，瓜子壳掉在光洁的地砖上，像几粒黑芝麻。

　　客户真名不提了，姓林，戴无框眼镜，左耳垂有颗痣。上周他还发来新需求截图，是某大厂APP弹窗：“请开启定位获取附近优惠”，下面一行小字写着“已启用无障碍模式”。我放大看了三遍，那行字自己就是无障碍模式下唯一被读出的内容，而主按钮“开启定位”在VoiceOver里压根没被识别——等于把“请吃饭”印在菜单封底，却把菜名全涂黑。林总原话是：“你看人家大厂都这么干，我们是不是也得跟上？”

　　我不屑的是这个“跟上”。跟上什么？跟上把无障碍当PPT一页的节奏？跟上把“动画炫技”和“所有人可见”钉在同一行标题里，再用同一个PSD图层交付的勇气？优胜劣汰从来不是口号，是去年十月我亲手删掉的七百行手写JS：用来绕过Chrome 89对prefers-reduced-motion的错误检测，结果发现iOS Safari 15.4根本不认这个媒体查询——白写了。白搭三个人日，就为让一个旋转加载图标，在系统设了“减少动态效果”时，乖乖变成静止圆点。

　　还有一次更离谱。前年接个婚庆网站，老板说“要梦幻泡泡飘起来”，UI稿里十六个泡泡各自带贝塞尔缓动，我按标准写了aria-live=off+role=presentation，结果新娘妈妈用旧版华为荣耀手机点开，泡泡没飘，页面直接黑屏。查日志才发现，那台手机的辅助服务开了TalkBack，但浏览器内核不触发animationstart事件——泡泡的transform动画执行了，opacity却永远卡在0。新娘当天没看见自己婚纱照轮播，只看见一片灰。

　　林总后来又打过三次电话，每次都在问“能不能先做出来看看”。我数过，从需求确认到上线，共收到十七次“先做出来看看”，其中九次发生在凌晨一点到四点之间。他不知道“先做出来看看”这六个字，在代码里意味着放弃预设边界、取消类型校验、容忍内存泄漏、默认关闭所有a11y检查——就像把消防栓喷口拧开，再问围观群众：“水够大吗？”

　　该不该接这类活？我说不准。但我知道，这次亏在没锁死“无障碍验收标准”这条——他们验收时用的是自己那台Win10 Chrome，关了所有辅助工具，点着鼠标滚轮一路滑到底，说“挺顺滑啊”。顺滑。对，很顺滑。顺滑得像冰面，连拐杖都站不住。

　　下回合同里，第3.2条必须写死：无障碍验证须以NVDA + Firefox + Windows 10、VoiceOver + Safari + iOS 16、TalkBack + Chrome + Android 12 三组组合实测通过为上线前提。不接受截图，不接受“感觉OK”，不接受“用户没投诉”。谁觉得多余，谁来写那七百行补丁。

（编辑：站长网）

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