HTML结构异常是网页无障碍失效的首要原因，源于浏览器静默纠错导致语义链断裂；灰色斜体节点、lang属性错误、未闭合标签等均会破坏DOM语义，使屏幕阅读器无法正确解析，ARIA补救亦无效。
HTML结构异常是网页无障碍失效的首要原因，不是样式或JS问题，而是浏览器解析时静默纠错导致语义链断裂——屏幕阅读器读不出内容、焦点顺序错乱、
<main>被吞进<code><div>里，八成源于此。</p>
<H3>Elements面板里看到灰色斜体节点就是危险信号</H3>
<p>打开 Chrome DevTools 的 Elements 面板，找那些字体灰、斜体、缩进异常的节点。这不是“显示效果问题”，而是浏览器被迫修复非法 HTML 后留下的痕迹。</p>
<ul>
<li>你写了 <code><div><p>文字</div></p>，实际 DOM 会变成 <code><div><p>文字</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5493" title="html-to-pptx">html-to-pptx</a>
<p>将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></div> + 一个孤立的 <code></p>（灰色斜体），说明 <code><p>在遇到 <code><div> 时被强制闭合</li>
<li>整个页面内容都缩进在一个未闭合的 <code><div> 下？那 <code><nav>、<code><header> 很可能已被浏览器移到该 <code><div> 内部，失去独立语义</li>
<li><code><meta>、<code><link> 被误写在 <code><body> 里？浏览器会把它移到 <code><head> 外，破坏文档元信息链，<code><title> 可能失效，<code>lang 属性可能丢失</li>
</ul>
<H3>lang 属性写错比不写更糟</H3>
<p><code>lang="zh" 或 lang="cn" 看似省事，实则触发 IETF 语言标签校验失败。屏幕阅读器要么跳过语言设置（用默认语音朗读），要么 fallback 到英语发音规则，中文读得像拼音串。
- 必须严格使用标准值：
lang="zh-CN"（简体）、lang="zh-TW"（繁体）、lang="en-US"（美式英文） - 连字符不能漏、大小写不能混：
zh-cn在部分旧阅读器中不识别；ZH-CN也可能被忽略 -
必须出现在最外层，且不可被 JS 动态覆盖——某些 SSR 框架（如 Next.js App Router）依赖它注入服务端属性
自动化扫描只捕获 30%–40% 的真实障碍
Lighthouse、axe-core 这类工具报“无障碍得分 95”，不代表页面可被真实用户操作。它们无法检测 Tab 键是否陷在弹窗里、
<dialog> 是否劫持了焦点、动态加载的内容是否被屏幕阅读器感知。</p> <ul> <li>真正有效的验证方式只有两种：用真实屏幕阅读器（NVDA / VoiceOver）从头到尾导航一遍；用键盘（Tab / Shift+Tab / Enter / Space）走完所有交互流</li> <li>SPA 页面需在内容加载完成后，右键 <code><html> 节点 → Copy outerHTML，再粘贴到 <a href="https://www.php.cn/link/33936698133cfff4e8303e4edb690110">Nu Html Checker</a> 分析——注意手动补上 <code><!DOCTYPE html>
Duplicate ID、Unclosed element、not allowed as child of element，这些直接导致语义树崩塌最常被忽略的点是：结构错误一旦发生，后续所有 ARIA 补救（比如加 aria-labelledby）都建立在错误的 DOM 基础上——就像给歪楼打补丁，越修越不稳。
