根本原因是HTML结构异常导致语义链断裂，浏览器静默纠错使DOM树偏离源码，屏幕阅读器仅依赖最终DOM的语义节点；常见诱因包括非法嵌套、错误写法、非标准lang值、缺失charset等。
为什么屏幕阅读器读不出页面内容
根本原因不是“阅读器不支持”，而是HTML结构异常导致语义链断裂。浏览器解析时静默纠错，DOM树已和你写的源码不一致，但屏幕阅读器只认最终DOM的语义节点——如果
<main>被吞进<code><div>里、<code><header>变成普通<code><div>、或<code><nav>被隐式闭合，阅读器就找不到导航区、主内容区、页眉这些关键角色。</p><p>常见诱因包括：<br> - <code><p>里嵌<code><div>（违反HTML规范，触发隐式闭合）<br> - <code><div/>写法（浏览器当<code><div>处理，后续所有内容变其子节点）<br> - <code><html lang="ch">这种非标准语言值（屏幕阅读器忽略或误判语言）<br> - 缺<code><title>或<code><meta charset="UTF-8">（部分阅读器依赖字符集推断编码，乱码即静音）</p><H3>Elements面板里看到灰色斜体节点就是危险信号</H3><p>打开开发者工具的Elements面板，找那些字体灰、斜体、缩进异常的节点——这是浏览器纠错后留下的“修复痕迹”。比如你写了<code><div><p>文字</div></p>，实际DOM会变成：<code><div><p>文字</p></div> + 多余的<code></p>（灰色斜体），说明解析器被迫补了一个闭合标签。</p><p>此时要立刻检查：<br> - 当前节点是否被意外提前闭合（如<code><p>遇到<code><div>就自己关了）<br> - 父容器是否没闭合（整个页面内容都缩进在某个<code><div>下）<br> - <code><body>内是否混入了<code><head>级标签（如<code><meta>写在<code><body>里，会被移到<code><head>外，破坏结构）</p><H3>lang属性写错比不写更糟</H3><p><code>lang="zh"或
lang="cn"这类简写看似省事，实则触发IETF语言标签校验失败。屏幕阅读器要么跳过语言设置（用默认语音朗读），要么强制fallback到英语发音规则，中文内容读得像拼音串。
立即学习“前端免费学习笔记（深入）”；
必须严格使用标准值：
- 简体中文：lang="zh-CN"
- 繁体中文：lang="zh-TW"
- 英文美式：lang="en-US"
- 不要拼错连字符，不要漏短横，不要大小写混用（zh-cn在部分旧阅读器中不识别）
PDF内嵌导致无障碍扫描报错不是你的锅
当用户点击<a href="https://www.php.cn/link/da26364a9b73621681a370d3427856ef">下载指南</a>，Chrome/Firefox会用内置PDF查看器新开一个上下文渲染PDF——这个新页面的根节点没有<code>lang，里没有<code><title></title>，扫描工具检测的就是这个运行时DOM，不是你的源页面。
你改不了它，但能规避误判：
- 别用<iframe src="doc.pdf"></iframe>假装“在线预览”，这会让PDF内容直接嵌进你页面的DOM，污染结构
- 链接文本必须标明格式与语言，例如：Download User Manual (PDF, en-US, tagged)
- 关键文档同步提供HTML摘要页，确保核心信息有语义化结构可读
真正难缠的从来不是阅读器本身，而是那些浏览器悄悄修好、你却没意识到的结构断裂点——DOM树看起来“能渲染”，不代表语义完整。每次修改HTML后，别只看视觉效果，花10秒切到Elements面板扫一眼层级是否干净。
