无障碍设计：从第一行代码起的尊重
|
我原以为高考那周的收录掉是爬虫放假——结果查了一下日志，发现六月七号凌晨三点十七分，有个带 aria-invalid="true" 的 input 被连续刷了四百一十二次，每次 POST 都带不同长度的 value，最长那个八百三十六字符，全是空格混着零宽空格混着 braille pattern。这个我敢打包票，我翻了三遍 raw log，没动过 filter。 那天在下雨，阳台衣服没收，晾衣杆上滴水啪嗒啪嗒砸在鞋盒盖上。群里“老陈”发了个捂眼哭笑表情包，配字：“今年作文题比我的 footer 标签还难闭合”。没人回他。我就盯着那个表单提交日志看，看它怎么把 tabindex="-1" 的 div 当成可聚焦元素反复触发 focusin——而真正该用键盘 tab 进去的搜索框，被我去年改版时随手加了 display: none；不是 visibility: hidden，是 display: none；我亲手删的。不是客户要的，是我自己嫌它丑。 查一下收录。打开站长平台。点“URL 检查”。输首页。等三秒。转圈。再输。再转圈。点“历史快照”。拉到六月五号，快照里所有按钮都是灰的，鼠标悬停没 hover 效果，但 screen reader 读出来是“点击跳转至招生简章（已禁用）”。我点开源码看，才发现那个按钮早被我加了 aria-disabled="true"，但没配 role="button"，也没加 keyboard event handler。键盘用户按回车，它真就……不响。一点声音没有。跟哑巴一样。 优胜劣汰啊。我昨天还在想，这词怎么听着像当年站群被清的时候，百度文档里写的“低质内容自然出清”——现在轮到我自己，轮到一个连 focus outline 都被我写死成 transparent 的页面。轮到我三年前写的那个“智能适配 JS”，它检测到是 NVDA 就直接 return false，然后静默 fail，不报错，不重试，不 fallback，连 console.warn 都没有。我就记得当时调试花了俩小时，最后在 if (isScreenReader) { return; } 后面补了句注释：“防误触”。防谁的误触？ 客户老张催得急，电话里说：“小刘啊，志愿填报系统挂了三天了，家长打电话说我网站‘点不动’，你查查是不是服务器问题？”我说不是服务器，是逻辑问题。他说：“那你重装下 jQuery？”我没接话。窗外电钻声又来了，哐！哐！哐！隔壁在敲承重墙，敲得我浏览器 devtools 里的 accessibility tree 都在抖。 我翻到六月六号下午的 commit 记录，就一行：feat(footer): 重构底部导航，移除冗余 ARIA。移除。我点了进去，diff 里清清楚楚：删掉了 aria-label="跳转至联系方式"，删掉了 role="navigation"，删掉了所有 旁的 aria-hidden="true"——因为我想让“联系方式”这三个字本身被朗读，而不是被藏起来。可我没补任何替代方案。没加 heading，没加 landmark，没加 skip link。我就删了，就像撕作业本最上面那行，撕完一抖，整页都飘起来。 排名消失不是一夜之间。是六月三号先掉移动段位，PC 没动；六月四号 PC 快照回退到五月十八号——那会儿 footer 还有 id="main-nav"；六月五号外链开始失效，两个高校论坛友链突然 404，点进去一看，对方新站用了 shadow DOM，我们的链接文本被截断成“...更多资讯→”，而他们解析器根本不读 slot 内容。牵连？我不信牵连。我信的是：当你的 HTML 连 tabindex=0 都不敢随便加的时候，搜索引擎和 assistive tech 其实是一伙的，它们只认同一种诚实——要么裸着写语义，要么别写。 想起九年前刚做站群那会儿，我们批量生成的页面，每个标题都套 h1，每张图都带 alt="图片"，每条链接都加 rel="nofollow"——不是为了残障用户，是为了骗过早期识别器，怕它把重复 alt 当垃圾。现在倒好，真有人拿“无障碍”当挡箭牌，把 button 写成 div，把 link 写成 span，然后说：“我们做了 ARIA，符合 WCAG。” 笑死。WCAG 又不查你 onclick 里有没有 preventDefault()；它只管你 label 关联对了没，tabindex 合理没，focus 状态显没显。其他？不管。活该。 我手边烟灰缸满了，第三根烟屁股还斜插在半截灰里。桌上摆着六月七号打印出来的高考试卷扫描件——不是为查题，是客户让我帮他们学校做个“盲文试卷查询入口”，我拖了两天没动。今天早上才想起来，原来我根本不知道视障学生怎么用 OCR 扫描试卷；我只知道 Chrome 的 Lighthouse 里有个“Accessibility”分项，分数掉到 67 就会标黄。黄了就黄吧。反正去年改版时，我就把那个标黄提醒关了，怕影响开发节奏。
文章配图，仅供参考 快照回退这事，到底是哪次更新的事我说不准。可能是五月二十八号的 core web vitals 推送，也可能是六月一号的 page experience update，更可能就是六月七号凌晨那四百多次无效 POST——爬虫看到表单疯狂报错，干脆把你整个 domain 标进“交互风险池”。但这些都不重要。重要的是：我去年写的那行代码，，它从一开始就不该存在。validity 不该由属性硬写，该由 JS 校验后动态改。可我当时图省事，手一滑，写死了 false。false 就是假的。假的，就该被淘汰。王工昨天在茶水间跟我说：“你那个招生系统，有个家长打客服说，按两下 shift 键就卡死。”我愣了两秒，才想起我加过 global keydown 监听，里面有一段 if (e.shiftKey && e.key === 'Tab') { e.preventDefault(); }——防反向 tab 跳出弹窗。可我没考虑 shift + Tab 是很多读屏软件的默认导航方式。我就防，防得特别准，准到把别人的手指关节都锁死了。 我原以为尊重是加东西：加 aria，加 title，加 skip link。结果尊重是减东西：减 display: none，减 inline style，减手写的 focus 管理，减一切你以为“用户不会用”的假设。删掉它们，HTML 就自己长出骨骼来。 明天先把手上那批页面删一半试试。不是删内容，是删那些自作聪明的 ARIA，删掉二十个 tabindex="0"，删掉十五个 role="application"，删掉所有带 aria-live="polite" 却从来不 update 的区域。让页面裸着。看看它还能不能喘气。 （编辑：站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
