媒体网站无障碍设计：9个运维老手最易忽略的适配点

　　去年二月，后台数据跳变那一刻——不是销量崩了，是辅助技术接口报错率突然从0.3%飙到17%，而且只在iOS Safari + VoiceOver组合下。我盯了三分钟，没敢点刷新，怕一刷新就真断了。王工端着保温杯路过，说“你那页面是不是又用div模拟button？”我说“没啊，button标签包着iconfont”，他扭头就去茶水间接水了，杯子还在我工位上留了个水印。

文章配图，仅供参考

　　风扇把快递单吹到地上，我弯腰捡的时候看见张磊在隔壁工位点外卖，手机屏幕亮着“黄焖鸡米饭 已下单”，他右手悬在半空，左手还在敲键盘改meta description。我直起身，突然想起第七个点：媒体网站老用picture+srcset做响应式图，但没给每个source加aria-hidden="true"，结果NVDA读图时连读三遍alt文本，中间还插一句“图片源 640w”。用户以为自己耳机坏了。

　　鼠标垫卷边了，右边翘起来盖住esc键，我每次想关devtools都按空格，反而把页面滚到底。这事儿和第三个点有关——视频自动播放控制。我们总以为加个muted就够了，但iOS有个隐藏逻辑：只要autoplay属性存在，哪怕video标签初始display:none，VoiceOver初始化时还是会触发一次play()尝试，然后卡住三秒，再报“媒体加载失败”。去年二月那波投诉，78%来自iPhone 12及以下机型。我原以为是CDN节点问题，结果在真机debug里看着它卡在oncanplaythrough之前，像人被噎住一样停在那里。

　　饮水机在咕嘟响。李主任来巡检，站我背后看了两分钟，说“你们这个无障碍验收报告，签的是第三方公司，可人家测的浏览器版本比我们线上支持的还少两个”。我没吭声。他走后我翻出那份PDF，第12页写着“已通过WCAG 2.1 AA级全部条款”，底下附了一行小字：“测试环境：Chrome 98, Firefox 95, Edge 97”。没提Safari，更没提Android TalkBack。优胜劣汰？不，是淘汰筛子漏得太大，漏下去的全是真用户，留下的全是过审截图。

　　仓库卷帘门的声音——我昨天去东仓调设备，门降下来那段“嗡…吱…嗡…”节奏，居然和我们首页轮播图自动切换的audio提示音频完全一致。当时我就笑了。第六个点：听觉反馈必须可关闭。但我们把关闭开关埋在用户中心三级菜单里，路径是“设置 > 辅助功能 > 媒体提示音 > 关闭”，而92%的盲人用户根本打不开用户中心——因为登录表单的label没for到input，他们靠voice command喊“点击登录”永远点不中。这事没人报bug，因为他们根本登不进来。

　　打包台上横着的一卷胶带，蓝白条纹，撕口朝左。这让我想起第五个点：链接文字。媒体最爱写“点击查看”，我们运维就跟着写href="https://www.shaguniang.cn/html/xinwen/chuanmei/2026-10-27/493136.html" onclick="jump()”。可Screen Reader不认识jump函数，它只读“点击查看”，不读目标页是什么。结果用户点进去发现是直播回放页，标题却是“记者暗访猪肉摊”，完全对不上。上周有个视障用户打12385投诉，录音里他说：“我听见‘点击查看’，就以为是政策解读，结果听到十分钟猪肉注水音频……耳朵受不了。”

　　平台规则。上周小红书推新规，要求所有信息流卡片必须支持touch target≥44px且有focus ring，我们首页那个32px高的“更多报道”箭头按钮，今天起算违规。法务说“先挂三天缓冲期”，运营说“先顶着，等Q2预算批下来重做”。我倒觉得无所谓——反正我们APP端流量占比已经57%了，网页版就是个引流入口，做太好反而拉高用户预期。亏钱案例？去年双十一，无障碍优化投入23万，换回来1.2%的页面停留时长提升，但FBA动销率毛都没动。老板看完报表，当着我和产品面说：“你们弄这些，不如把‘购买’按钮颜色调深5%。”

　　第二点最气人：表单验证错误消息没和输入框绑定。用户填错邮箱，页面顶部弹个toast：“格式错误”，但NVDA根本不会读它——因为没role=alert，也没aria-live。我改完之后，赵姐说“你加aria-live=polite太温柔了，得用assertive，不然用户填十个字段错九个，他都不知道错在哪”。我说“那要是用户网速慢，alert堆一起呢？”她甩给我一个GIF，里面五条红色弹窗叠在一起飘，最底下那条写着“请输入正确手机号”，前面四条全被盖住了。她说：“对，就是这样。真实世界就是一堆东西叠着出错。”

　　我盯着那个GIF看了两分钟，手边咖啡凉透了。第一个点我记不清具体是哪个月的事了，只记得是个周五下午，张磊交上线稿，我们照常走CI，deploy完不到二十分钟，客服群炸了：三个不同省份的视障用户，同时进不了评论区。排查到⭐️⭐️⭐️⭐️是某个前端同事把textarea的tabindex="-1"写进了全局样式表——本来想禁用某处冗余焦点，结果所有评论框都被锁死了。没日志，没报警，纯靠人工打电话问出来。我们删掉那行CSS，热更重启，十五分钟后客服说“好了”。王工后来在食堂说：“这事儿能进年度十大低级错误前三。”

　　我准备今晚把aria-labelledby的id引用加进webpack.ignore列表，顺便看看能不能把那个蓝白胶带借来，贴在测试机键盘上，提醒自己别再漏扫Safari。至于下周的三方无障碍复测？让他们测吧。我先把FBA库存同步接口的timeout从8s改成12s——刚收到消息，越南仓那边网络又抖了，我们得先保住订单不丢。别的，慢慢来。

（编辑：航空爱好网）

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