HTML 结构对屏幕阅读器不友好

屏幕阅读器读不懂你的页面，90% 不是屏幕阅读器的问题，是 HTML 结构的问题：用 div 和 span 堆出来的界面在可访问性树里就是一团没有名字、没有角色的文本，屏幕阅读器只能照字面朗读，用户无法按标题、地标、表单控件跳转。结论是：先把原生语义标签用对，再考虑 ARIA，能解决绝大多数「不友好」。

屏幕阅读器是怎么"看"HTML 的？

结论：屏幕阅读器不读 CSS 排版，它读的是浏览器生成的可访问性树（accessibility tree），里面记录每个节点的角色（role）、名称（name）、状态（state）。

NVDA（Windows 上免费开源的屏幕阅读器，由 NV Access 维护）按 H 在标题间跳、按 D 在地标间跳、按 K 在链接间跳；VoiceOver 用 Control+Option+U 打开转子做同样的事。这些快捷键能生效的前提，是页面里真的存在 h1-h6、header/nav/main/footer、a、button 这些元素。如果你的标题写的是 <div class="title">，NVDA 的标题列表就是空的，用户只能一个词一个词地听完整页。

WCAG 2.2（2023 年 10 月 5 日成为 W3C 正式推荐标准）里，1.3.1「信息和关系」、2.4.1「绕过区块」、4.1.2「名称、角色、值」都是 A 级要求，对应的正是结构问题。

哪些 HTML 写法最容易被误读？

结论：以下 7 类是最常见的结构坑，按出现频率排序：

1. div 汤：用 div 加 onclick 冒充按钮。role="button" 的 div 不会响应 Enter 和 Space，键盘用户按不动。
2. 标题层级跳跃：h1 直接跳到 h4，或者一页里塞 5 个 h1。屏幕阅读器用户靠标题层级建立页面地图。
3. 图片缺 alt：装饰图写 alt=""（空值，会被跳过），功能性图片写功能描述，例如「搜索」而不是「放大镜图片」。
4. 表单控件没有可访问名称：<input placeholder="邮箱"> 不算名称，要用 <label for> 或 aria-label。
5. 表格没有表头关联：数据表必须用 <th scope="col"> / <th scope="row">，否则读屏时听到的是一串没有列名的数字。
6. 正数 tabindex：tabindex="1" 会打乱 DOM 顺序，造成焦点跳跃。只用 tabindex="0" 和 -1。
7. 动态内容不播报：SPA 路由切换、表单异步报错，不加 aria-live="polite" 或 role="status"，屏幕阅读器不会主动朗读。

WebAIM 的 Million 项目 2024 年扫描 100 万个网站首页，平均每页检出 51 个无障碍错误，「图片缺少替代文本」和「低对比度文本」连续多年排在前两位。

从 div 汤改成语义化结构，具体怎么做？

结论：按「地标 → 标题 → 控件 → 动态播报」四步改，改动量通常不超过页面的 20%。

第一步，搭地标骨架。 页面外层用 header、nav、main、footer，一个页面只允许一个 main。在 body 开头加一个跳过链接：

<a href="#main" class="skip-link">跳到主内容</a>
...
<main id="main">...</main>

第二步，把每块内容的标题还原成 h1-h6，不跳级。 视觉大小用 CSS 控制，不要为了字号去选标签。

第三步，控件用原生元素。

<!-- 改前：屏幕阅读器读不到角色，键盘按不动 -->
<div class="btn" onclick="submit()">提交</div>

<!-- 改后：自动获得角色、键盘支持和焦点样式 -->
<button type="submit">提交</button>

导航用 a href，动作触发用 button，这是最容易被搞混的一对。

第四步，动态区域加播报。 表单校验失败时，把错误文案放进 <div role="status">；SPA 切换路由后，用 JS 把焦点移到新页面的 h1（h1.focus() 前记得给它 tabindex="-1"）。

怎么验证改得对不对？

结论：工具扫一遍只能覆盖约 30% 的问题，剩下 70% 必须用键盘和屏幕阅读器人工走一遍。

自动化：Chrome DevTools 的 Lighthouse 面板有 Accessibility 审计，axe DevTools 浏览器扩展能定位到具体节点，WAVE 会直接标出结构错误。这三者都查不出「焦点顺序是否合理」这类问题。

人工验证三步：第一，拔掉鼠标，只用 Tab 键走完全流程，确认每一步焦点可见（不要写 outline: none），这对应 WCAG 2.4.7「焦点可见」；第二，打开 NVDA 按 H 和 D 分别列出标题和地标，看结构是否讲得通；第三，用一个只显示纯文本的工具（或浏览器的阅读模式）看内容顺序是否和视觉顺序一致。

补充一条原则：ARIA 的第一定律是「能用原生 HTML 就不用 ARIA」。role="button" 不会自动带来键盘支持，aria-label 也不会让 div 变成真按钮，写错 ARIA 比不写更糟。

回到标题：HTML 结构对屏幕阅读器不友好，本质是语义丢失——角色、名称、层级、状态四样东西缺了任何一样，读屏用户就得靠猜。先把地标和标题搭对，再用原生控件替代 div，最后给动态内容加 aria-live，这三件事做完，页面的可访问性就超过了大多数网站。