媒体网站无障碍设计：9个性能工程师最易忽视的技术适配点

　　去年双十一，小孟在门户干了四年频道编辑，专题页改版被产品推翻三次，上线前夜又改回初版——我那天蹲在他们测试环境里盯FMP，屏幕右下角时间跳到凌晨一点十七分，机房空调嗡嗡响得像台老拖拉机，旁边工位的运维老张突然接起电话：“喂？哦…缓存预热还没跑完？挂了啊。”他拇指一按就撂了，顺手把半盒凉透的麻婆豆腐拌饭往桌沿推了推，红油浮在表面，凝了一层薄皮。

　　我说优胜劣汰不是玄学。是实打实被筛下来的：去年十一月，我们接了一个省级媒体的无障碍改造验收委托，表面是“支持读屏、高对比、键盘导航”，结果测到第三天，小孟直接把耳机线扯下来甩在桌上——她边听JAWS读稿边念错字：“……本台记者于二零二五年十一月十日，在雨花台烈士陵园采……”JAWS卡在“采”字上重复三遍，最后吞掉“访”字，蹦出“采园”。她没骂人，但手指在键盘上敲了三下空格，又停住，那声音很轻，但特别清楚。

文章配图，仅供参考

　　性能工程师最易忽视的九个点？我数过，不用记笔记。第一个是CSS media query里的prefers-reduced-motion，我们用动画做加载态，还加了弹性缓动，结果iOS VoiceOver一开，所有动画强制disable，loading图标冻成一张png——而我们的前端监控压根没报错，因为DOM没崩，JS没throw，连Lighthouse都打98分。我原以为这是UX的事，结果发现他们压根没配@supports (prefers-reduced-motion: reduce)，连兜底样式都没写。这个我敢打包票。

　　第二个是焦点管理。专题页顶部轮播图有四张图，每张图都带a标签跳转，但我们只给第一张设tabindex=0，后三张tabindex=-1——问题是，当用户用键盘从左往右Tab过去，焦点到第二张图时，它不响应。为什么？因为那张图实际是用opacity:0 + visibility:hidden隐藏的，但display:none没加，JS还定期setInterval重刷焦点索引……可没人管setInterval是否在hidden状态下还在跑。那天下午五点零七分，我看见小孟左手悬在键盘上两秒没动，右手摸了摸耳钉，说：“这页我用鼠标能发稿，用键盘进不了详情。”

　　第三个是动态内容更新没发aria-live。专题页右侧“实时评论流”用fetch轮询，每三秒追加一条。我们写了innerHTML += `${text}`，没包region，没设aria-live=polite，JAWS根本不知道有新评论进来。更绝的是，有次小孟正听评论，后台悄悄插入一条带视频链接的回复，整个读屏器静默十二秒，等她手动Tab到新元素才重新发声——她当时正嚼口香糖，咔嚓一声，然后说：“你们这‘实时’，比我们审稿流程还慢。”

　　第四个是字体加载阻塞渲染。用了自定义字体家族，但@font-face里没加font-display: swap。FMP延迟十八秒，不是因为CDN慢，是因为字体文件404了，浏览器干等五秒超时才fallback——而fallback字体字号不对，行高崩了，导致screen reader读的时候段落粘连。那个字体文件URL是https://fonts.example.com/v2/serif-plain.woff2，结尾是woff2，但服务器返回404时Content-Type还是text/html。运维说“这不是我们事”，我截图给他看HTTP状态码和响应头，他低头扒拉手机，微信弹出一个红包提醒，点了收，又切回去继续看终端。

　　第五个是表单label绑定失效。所有搜索框用div模拟input，靠JS监听click模拟focus，label for属性写的ID和实际元素ID对不上，差个下划线。这不是笔误，是构建脚本把ID全小写了，label里还留着驼峰。第六个是视频播放器没暴露出播放/暂停的aria-controls关系。第七个是面包屑导航用span拼的，没套nav+aria-label。第八个是错误提示用Toast浮层，消失太快，JAWS刚开口读“提交失败”，Toast已关闭，剩下半句“请检查网——”没了。第九个……第九个我其实记混了。可能是iframe contentDocument的title没同步，也可能是SVG内嵌文字没加role=presentation，反正验收当天上午，第三方无障碍团队指着报告里第十九条说：“这个算不算？”，我没答上来，只点了下笔记本触控板，风扇突然狂转，呼呼地盖过了所有声音。

　　说真的，我不怪前端。去年三月他们上线新版采编后台，发布按钮转圈半分钟，小孟蹲在工位等提交成功，一边等一边给作者回微信解释延迟，手机搁在键盘右上角，亮着屏，微信对话框里那句“稿子已发”发出去之后，她才伸手去点那个终于转停的绿色对勾。那天窗户外一直在下雨，不是暴雨，是那种黏糊糊的阴雨，玻璃上水汽结得不匀，有些地方雾着，有些地方清亮，能看清对面楼顶的霓虹灯牌，“新闻”两个字闪了两下，断了。

　　我们后来补了prefers-reduced-motion检测，加了focus-trap，改了label绑定逻辑，但验收前夜小孟自己又跑了一遍读屏流，发现某篇人物特写稿的引文区块，用了blockquote+cite，而cite标签里嵌了span，里面写了“《南方周末》2025年11月刊”，但span没加aria-hidden="true"，JAWS把“《南方周末》2025年11月刊”读成“南 方 周 末 二 零 二 五 年 十 一 月 刊”——每个字分开念，节奏诡异。她截了图扔到群里，没人回。群里最后一条消息是产品发的：“文案微调，明早十点前确认”，时间戳是凌晨两点零三分。

　　所以我现在看到任何带“无障碍”三个字的需求文档，第一反应不是打开Lighthouse，是先问一句：你们有没有让真正在用NVDA或VoiceOver的人，在没鼠标、没触控、只靠键盘和耳朵的情况下，走完从首页→专题页→文章→评论→返回的全流程？没有？那别跟我聊WCAG AA。聊也没用——上次我提这事，架构师叼着牙签从茶水间晃出来，往我桌上放了瓶冰啤酒，瓶身全是水珠，滴在键盘ESC键上，啪嗒，啪嗒，然后他说：“你测你的，我交我的，绩效线摆那儿，谁先达标谁赢。”

　　这九个点，我列给你了。至于要不要补，什么时候补，补到哪一层——你自己掂量。我下周一去给另一个地方讲“性能与无障碍协同落地”，PPT第一页我打算空着，就打一行字：“今天不讲怎么做，讲为什么每次都说‘下次一定’。”

（编辑：站长网）

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