HTML代码审查中快速识别并拦截低可访问性设计

可访问性听起来复杂，但实际执行时，稍不注意就容易出现漏洞。本文探讨在代码审查环节中，如何高效识别那些“看不见”的可访问性隐患。先明确几个关键判断：导致辅助技术“失效”的，往往并非高深的技术难点，而是最基础的那几个属性遗漏或填写错误。

检查 alt、label、lang 是否缺失或无效

事实上，大部分可访问性问题，追根溯源都出在最基础的几个属性上。alt、label、lang，这三个属性只要漏掉一个或填写不当，屏幕阅读器就会直接“失语”，搜索引擎也无法正确理解页面内容，键盘导航更是会中断。

实际代码中常见的情形包括：img 标签上 alt 完全缺失，或者写了等同于没写——例如 alt="图片" 或 alt="icon"，这种文本与空值无异；input 没有关联 label，或者 label 的 for 属性指向了一个不存在的 id；整个 html 标签直接缺少 lang 属性。这些都属于严重硬伤。

• img:not([alt]) 和 img[alt="\"] 代表两种完全不同的场景，需要区别对待。前者必须补充描述性文字，后者仅允许用在纯装饰性图片上。
• input:not([id]) 搭配 label[for] 的组合必须成对出现，缺一不可。如果使用 aria-label 来替代，必须确认它不会被 Ja vaScript 动态覆盖。
• html:not([lang]) 是绝对的硬伤，哪怕只写一个 lang="zh-CN"，也能让 VoiceOver 等工具正确发音，避免读出乱码。

验证地标元素与标题层级是否断裂

辅助技术之所以能快速跳转页面，依赖的是语义结构。比如 na v、main、header 这些原生标签，它们不是“锦上添花”的装饰，而是整个导航路径的锚点。如果使用 div 加一堆 class 来模拟，document.querySelector('na v') 根本查不到，辅助技术也就无法识别。

标题跳级也是常见问题——例如 h1 后面直接跟 h3，section 没有配 h2 到 h6，或者 main 内部嵌套了大量 div 却缺乏明确语义划分。这些都会让读屏软件的逻辑变得混乱不堪。

• 先用 Chrome DevTools 里的 Lighthouse 运行 Accessibility 审计，重点关注“Document has a main element”和“Headings don’t skip levels”这两项。
• 手动右键选择“Inspect”，在 Elements 面板中确认页面是否真的有 na v、main 这样的节点，而不是 div role="na vigation" 这种挂羊头卖狗肉的做法。
• 直接执行 document.querySelectorAll('h1, h2, h3, h4, h5, h6')，检查返回的标题数组是否严格递增或持平——比如 h2 后面可以接 h2，但不能直接跳到 h4。

用键盘导航实测焦点流是否完整

自动化工具能检测出的问题终究有限，像“焦点陷阱”、“焦点丢失”、“顺序错乱”这些，必须靠人手按 Tab 键逐一走一遍。鼠标能点到的地方，键盘未必能进入；视觉上连续的区块，Tab 键可能直接跳过。

典型问题通常是：模态框打开后焦点没有锁定在内部，关闭后焦点也没有回退到触发按钮；div 模拟按钮忘了加 tabindex="0"；display: none 的元素居然还残留在 tabindex 流里。

• 试着禁用鼠标，全程只用 Tab / Shift+Tab / Enter / Space 来操作，观察焦点是否落到了每一个可交互区域。
• 焦点进入 iframe 后，Tab 键能否自然出来；进入弹窗后，按 Esc 能否关闭且焦点回归原位。
• 打开 DevTools 的 Elements 面板，选中某个节点，看右下角的“Accessibility”标签页，确认 Focusable 和 Keyboard focusable 是否为 true。

别信 Elements 面板显示的 DOM 就是源码

你写的 HTML 和浏览器最终生成的 DOM 是两回事。Ja vaScript 动态插入、框架渲染，甚至非法的嵌套结构，都会让 Elements 面板呈现出一个“看起来正常”的 DOM，但语义层早就崩溃了。比如 p 标签里塞一个 div，浏览器会自动闭合 p，把 div 踢到外面，变成孤立节点。

这种节点浏览器不会报错，但 document.querySelector('na v') 找不到它，CSS 选择器也匹配不到，屏幕阅读器直接忽略。

• 运行 document.querySelectorAll('*').forEach(el => { if (!el.parentElement) console.log('孤立元素:', el) })，揪出所有没有父节点的元素。
• 在 Elements 面板里找那些灰色、半透明、缩进突兀的节点——那是浏览器补全或踢出的结果。
• 右键某个节点，选择“Edit as HTML”，敲个空格再回车。如果整块结构发生了位移，说明原始嵌套不合法，DOM 已经被重排过。

真正难的不是发现低可访问性，而是接受一个事实：HTML 源码只是意图草稿，真实可访问性只存在于浏览器解析后的 DOM 结构，加上辅助技术实际读取的路径中。绕开这个前提去修样式、补 Ja vaScript 补丁，只会让问题变得更加隐蔽。