区块链工程师视角：媒体网站无障碍设计的9大技术盲区

　　去年三月，我蹲在媒体站的前端监控后台，看那条对比度曲线半夜三点突然塌陷——不是报错，是悄悄掉进 WCAG 2.1 AA 的临界值下面，像被刀削过。没人告警，没人改。我截图存进站长平台文件夹里，名字叫“3.17_深灰文字+白底_未处理”，现在还在那儿，半年了。

　　V2EX 这地方发帖不兴喊口号，就扔问题。所以我也直说：所谓“区块链工程师视角下的媒体网站无障碍盲区”，根本不是视角多新鲜，是咱写链上合约写多了，手指头记得怎么防重放、怎么校验签名、怎么卡死异常分支——结果回来看网页，连一个 `` 没加 `type="button"` 都敢上线，还配叫“工程”？

　　第一个盲区：焦点管理当装饰品。我原以为只是 tabindex 乱填，结果翻他们 React 代码，`useEffect` 里手动 focus 一个动态生成的 modal，但 modal 本身没设 `aria-modal="true"`，更没锁外层滚动。测试时用键盘 tab 到第七下，光标飘进背景文章正文里去了——而那个 modal 正盖着整屏。这个我敢打包票，不是模拟器问题，是真飘。同事老张电话里吼我：“你点鼠标不就完了？” 我挂了电话，顺手把凉掉的茶推到显示器右下角，杯底压住了一张上周的流量周报。

　　第二个盲区：图片 alt 写成埋点字段名。竞对站昨天又改标题了，新标题带个图标，alt 是“icon_click_track_v3”；咱家的 banner 图，alt 是“img_202403_promo”。不是漏写，是真当占位符用了。你说这是意识问题？不，是构建流程里压根没接入 linter 规则——webpack 打包时跳过所有 `alt=""` 校验，就像我们当年绕过 Ganache 直连主网调试一样自然。可这事儿我说不准，因为他们的 CI 脚本我只扫过两眼，没深挖配置树。

　　第三个盲区：表单错误消息悬浮不绑定。用户输错邮箱，红色提示弹出来，但 `aria-live="polite"` 绑的是整个 `.error-wrapper`，而 wrapper 里混着一段 JS 插入的 `` 注释节点——屏幕阅读器念完错误，顺嘴把注释也读了，语序全乱。我提了 PR，被拒，理由是“影响首屏性能”。呵，影响性能？他们首页跑三个 web3.js 实例加一个 ethers v5 的 polyfill，加起来比整个 ARIA spec 文档还大。

　　第四个盲区：响应式断点直接干掉语义结构。媒体站切到平板尺寸时，把 `` 塞进 ``，但 nav 外层 `role="navigation"` 丢了，aria-label 也没补。我试过用 Puppeteer 跑 axe-core，它报“Navigation landmark not programmatically determinable”——机器懂，人懒得修。那天下午四点十七分，我盯着 Chrome DevTools 的 Accessibility 标签页，看着那个橙色叹号，突然想起前年在以太坊伦敦升级前夜，我们也是这么盯 EIP-1559 Gas Price curve 的波动，盯着盯着就睡着了。

　　第五个盲区：视频字幕轨道硬编码进 ``，没走 ``。他们录了个两会解读短视频，字幕 SRT 文件被当成封面图 base64 编进 img src，再用 JS 解码拼进 video.innerHTML——然后声称“支持字幕”。我拉了段 2 秒录像测语音识别准确率，发现他们字幕里把“十四五”写成“十五五”，错得挺稳。

文章配图，仅供参考

　　第六个盲区：动态加载内容不发 aria-busy。点赞数异步刷新，按钮从“赞（23）”变成“赞（24）”，但 `aria-busy="true"` 就像区块链里的 nonce，设了等于没设：不校验，不递增，也不清空。用户等三秒，听不见变化，只看见数字跳了一下——而跳之前，JS 已经把旧 DOM 元素删了，又塞个新 span 进去。这不是 UX 问题，是 DOM 生命周期管理比 PoW 还随缘。

　　第七个盲区：高对比度模式下 CSS 自毁。他们用 `@media (forced-colors: active)` 覆盖颜色，结果把 `::before` 伪元素生成的内容全抹黑了——那些用 icon font 做的播放/转发小图标，没了。而真正该显形的 SVG 路径，反而被 `currentColor` 带崩。这事儿我不细说了，反正他们昨天更新的样式表里，`.article-body p:first-of-type::first-letter` 还挂着个 `text-shadow: 0 0 4px #000`，在高对比模式下，字直接糊成一团墨。

　　第八个盲区：iframe 嵌第三方内容不设 title。微博嵌件、B站 iframe、还有那个永远打不开的央视频直播窗口，全没 title 属性。测试员问：“这个区域是什么？” 开发答：“是微博。”——可屏幕阅读器只说“内联框架”，不说微博。就像你调用 `contract.methods.transfer().send()` 却不传 `from` 地址，链上返回 revert，浏览器还显示“操作成功”。

　　第九个盲区：语言属性写死 HTML，不随内容变。一篇双语报道，中文正文，英文引述段落，`` 硬顶全场。英文引文里 `` 是写了，但 `lang="en"` 在 `` 里不生效——必须透传到 ``。他们修复方案是：加个按钮，点一下把整页 reload 成 en-US 版。我看着那个按钮上的 SVG，是个地球仪，转轴歪了七度，明显是 Figma 导出时没居中。

　　说到底，“优胜劣汰”这词不是吹的。去年三月那波流量跌了十八秒，服务器日志里全是 400，查下来是某省视障用户群体切换朗读引擎时高频触发焦点劫持——而我们的 error boundary 捕获不到。没爆红，没报警，只有 Sentry 里三十七条带 `aria-errormessage` 字样的 warn 日志，ID 串得跟交易哈希似的。要不要改？要。什么时候动？下个迭代。哪个迭代？我说不准。

　　刚收到邮件，说运营部要把首页推荐位换成 NFT 盲盒入口，UI 已出稿，周四对齐。我现在去煮壶新茶，杯子还放在显示器右下角，茶渍印子已经干了。

（编辑：站长网）

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