无障碍设计失灵？动态跨界整合破局

　　前端又在群里甩图了——「这个按钮的焦点状态怎么又没了？上次改的版本呢？」我盯着屏幕上的动效组件，数位笔的笔尖刚换过，在数位板上划拉时还有点涩。记不清是第几版了，反正无障碍设计的测试报告又飘红，说视障用户根本触发不了那个悬浮菜单。可我们明明按 WCAG 2.2 的标准做了啊？键盘导航、高对比度模式、ARIA 标签……该有的全有，结果测试员说「按 Tab 键跳到第三个元素就卡死了」。

文章配图，仅供参考

　　产品经理抱着笔记本凑过来，屏幕上是用户反馈的截图：「这个下拉菜单怎么点不开？」我点开设计稿，发现空态页面的组件层级被压到了最底层——哦，原来是动效里忘了给交互元素留 Z-index。可测试报告里根本没提这点，只说「无障碍功能失效」。我翻回第一版设计稿，首屏的栅格线是 8px 间距，现在被改成 12px，说是「视觉更透气」。透气是透气了，键盘导航的焦点框直接卡在了栅格缝里，按方向键根本跳不过去。

　　隔壁工位的小林在刷短视频，外放声盖过了我的吐槽：「这动态整合方案到底谁想的？把无障碍、动效、交互全揉进一个组件里，结果每个模块都在打架！」我盯着屏幕上的代码，突然想起上周和前端争执的场景——他说「动态跨界整合是趋势」，我说「趋势个屁，现在连基本功能都做不流畅」。他指着竞品的设计图：「你看人家，悬浮菜单能跟着鼠标飘，焦点状态还能渐变！」我反手甩出测试报告：「人家用户反馈里 30% 都是‘按不动’‘跳不过’！」

　　可老板信了。他说「优胜劣汰，做不出来的团队就该被淘汰」。我原以为他是说技术能力，结果今天晨会他拍着桌子喊：「从今天起，所有组件必须支持动态跨界整合！无障碍？那是基础功能，顺便做就行！」顺便做？我盯着色板里那排说不清的灰，突然想起上周改废的稿子——原本是给视障用户设计的「高对比度模式」，结果被产品经理改成「暗黑模式」，说「年轻人更喜欢」。现在测试员反馈「暗黑模式下的焦点框根本看不见」，老板却说「那是他们没调好手机亮度」。

　　窗台上的绿萝死了半盆，叶子蔫得像我现在的表情。我打开切图工具，发现动态组件的命名规则又变了——昨天还是「component_dynamic_v1」，今天变成了「component_cross_v2」。前端在群里喊：「谁改了命名？我的自动构建脚本报错了！」我回：「可能是产品经理，他刚才说‘跨界’比‘动态’更高级。」

　　但最离谱的是空态页面的动效。设计稿里写的是「淡入+缩放」，前端做成了「旋转+闪烁」，说是「更吸引用户注意力」。结果测试员反馈「视障用户的屏幕阅读器读到一半卡住了，因为动效没加 ARIA 标签」。我翻出 WCAG 的规范，第 3.2.5 条明确写着「动态内容必须提供暂停、停止或隐藏的选项」，可我们的组件里连个「关闭动效」的按钮都没有——老板说「那样太丑，影响转化率」。

　　我原以为无障碍设计是底线，结果现在成了「可选项」。产品经理说「用户没时间等加载，动效必须快」，前端说「动态整合能减少 HTTP 请求，提升性能」，可没人管视障用户能不能用。测试报告里的红条越来越多，老板却盯着竞品的动效视频说：「为什么他们的悬浮菜单能飘得那么顺？」我指着视频里的焦点框：「因为他们没做无障碍，键盘导航根本跳不过去。」他沉默了两秒，说：「那……先做动态整合，无障碍后面再补？」

　　后面再补？我盯着桌上那只干了的马克杯，突然想起自己那份没人看的作品集——里面全是「遵循 WCAG 2.2 标准」「支持键盘导航」「高对比度模式」的案例，可现在呢？这些设计全被塞进了「动态跨界整合」的壳子里，成了老板口中的「创新」。而真正的无障碍功能，像那只死掉的绿萝，被扔在角落里，没人浇水，没人理睬。

　　所以现在怎么办？继续和前端争执命名规则？还是偷偷把焦点框的 z-index 调高？或者……直接在代码里加个「无障碍模式」的开关，让用户自己选？可老板说了，「动态跨界整合是未来，不跟进的团队会被淘汰」。我叹了口气，打开切图工具，把「btn_hover_active_focus_disabled_loading.png」重命名为「component_cross_dynamic_v3.png」——管它呢，先过审再说。

（编辑：草根网）

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