媒体网站无障碍设计：9个技术盲区

　　我原以为改完无障碍标签，索引量掉个两成是正常抖动。结果四月十二号凌晨三点查收录，发现三百七十二个词全绿了——不是没排上，是快照里连页面标题都变成“页面加载中…”的空白框。我盯着屏幕抽烟，阳台那件灰衬衫没收，被雨潲得半湿不干，贴在晾衣杆上像块褪色的补丁。

　　群里王工发了个捂脸表情包，配字：“盲区？我看是盲肠发炎”。他刚给某党媒做完适配，说他们连焦点管理都没配，键盘Tab一按直接飞出页面，跳到浏览器地址栏。客户那边催得急，张总语音一条接一条：“老李，昨天友链站长问我是不是挂马了，说点开咱站，读屏软件报‘元素未命名’，他以为咱们在搞黑帽”。我没回，但手机烫得搁不住，搁桌上时碰倒了烟灰缸，三根烟头全滚进键盘缝隙里。

　　查一下收录——先登后台，再点左侧菜单第三项，再输域名前缀，等它转圈二十秒，再点“刷新缓存”，再切到新窗口手动搜site:，再点“工具”下拉选“时间范围”，再点“全部结果”……结果还是零。这操作我练了十七年，比泡面还熟。可这次，它就是不出数。这个我敢打包票：不是抓取频次问题，是抓取器进了页面，但没往下走——它卡在那个带ARIA-live的弹窗上了。那个弹窗本该实时播报“视频已加载完毕”，结果开发写成每秒重绘一次DOM，而搜索引擎的渲染引擎，压根不跑定时器。

　　隔壁装修的电钻声又来了，哒哒哒，跟当年我做站群时刷百度快照的节奏一模一样。那时候我们批量生成页面，title堆满关键词，meta description硬塞三百字，连锚文本都用CSS隐藏后又用JS重新show出来。现在倒好，换了一身皮，标着WCAG 2.1 AA合规，结果让蜘蛛在语义树里迷了路。刘主编上次来办公室，指着首页轮播图说：“这个‘跳过动画’按钮放太靠右，视障用户得按十五次Tab才摸到”，我当时点头说好，转身就让前端把按钮删了——加了个onkeydown监听，Enter键强制暂停，但忘了加role=“button”，更没设tabindex="0"。它在DOM里存在，在可访问性树里不存在。搜索引擎看得见节点，看不见意图。

　　后来翻日志才发现，四月五号那次CDN更新，把所有SVG图标默认套了aria-hidden="true"。不是配置错了，是那个叫小周的新运维，照着某份开源无障碍模板抄的，模板里写的是“icon-only SVG should be hidden”。可咱媒体站哪有icon-only？每个SVG下面都带着span文字，但被display:none压着，文字在视觉上不可见，却要靠SR-only类撑起可访问文本——结果他连SR-only的class名都拼错了，写成sr_only（少了个连字符）。所以读屏能读到空格，蜘蛛能抓到svg标签，但谁都读不到那句“评论已关闭”。

　　快照回退这事最荒唐。三月二十八号的快照里，文章底部还有作者简介模块；四月七号的快照，整块没了，变成一行灰色横线。不是删除，是CSS把div visibility设成hidden，但height还占着。搜索引擎不渲染CSS，但渲染引擎会判断：这个元素没内容、没交互、没尺寸变化，那就当它不存在吧。结果呢？作者页的内链全断了。李编辑上周还在群里问：“我那篇稿子链接怎么点不开？”我截图给她看源码，她回：“啊，这行style是我写的…我以为只是不显示。”

文章配图，仅供参考

　　移动端和PC结果不一样？呵。PC端渲染完整DOM，移动端为了省流量，让前端用IntersectionObserver懒加载正文，但没给每个section设role="region"，也没加aria-labelledby。搜索引擎移动端抓取队列单独跑，它不执行Observer回调，所以正文永远“未进入视口”，永远不加载。PC端快照里有全文，移动端快照里只剩个标题+导语+三个div placeholder。客户问我为啥APP分享出去链接没摘要，我说：“您APP调的是移动端快照接口。”她沉默三秒，说：“……那我们改APP？”

　　我翻过九份所谓“无障碍合规报告”，七份用axe-core扫出来的，两个拿wave跑的。它们全没测真实抓取行为。axe能告诉你button缺label，但不知道你那个“阅读更多”按钮绑的是location.href跳转，还是pushState路由——前者蜘蛛跟得进去，后者在无JS环境里就是个死链。WAVE更绝，它标红“缺少跳转链接”，建议加skip-link，可咱首页根本没有导航栏，所有入口都藏在汉堡菜单里，菜单由JS动态注入……然后报告打了个绿色勾。合规？合的是扫描器的规，不是搜索引擎的规。

　　优胜劣汰这事，真不用算法喊口号。去年做财经站改版，同行老陈非说“无障碍影响首屏速度”，砍掉所有语义化结构，全用div套div，靠CSS Grid硬排版。他站索引量半年没动，但我发现他三个月内换了四家SEO服务商。前天他在朋友圈晒新站上线，首页title写着“无障碍友好型财经平台”，底下配图是带focus ring的按钮。我点开，用手机访问，长按两秒弹出“朗读此页面”，系统直接报错：“无法访问当前页面”。

　　那天下午四点十七分，我在后台导出所有含aria-属性的URL，一共四千一百零八个。我点了删除，光标停在确认键上，没按下去。窗外雨停了，楼下发廊开始放《好运来》，声音不大，但每个鼓点都准。我抽完最后一根烟，把烟灰弹进键盘缝里——那儿还卡着三根烟头，黑灰混着白灰，像一段没执行完的script。

　　明天先把手上那批页面删一半试试。

（编辑：站长网）

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