网页中 h1 元素嵌套在 section 内部时如何影响文档大纲
网页中 h1 元素嵌套在 section 内部时，旧版浏览器可能将其渲染为 h2，这会影响屏幕阅读器的文档结构朗读顺序。
旧版浏览器对嵌套 h1 的特殊渲染规则
HTML 标准在 2025 年 5 月之前，对 section、article 等元素内的 h1 有特殊处理，默认渲染为 h2 或更小字号。这种上下文相关的默认样式旨在区分文档主标题与章节标题。但该规则现已移除，浏览器不再自动降级嵌套 h1 的显示层级。若网站仍依赖旧版浏览器，未设置样式的 h1 可能显示为 h2 大小，导致视觉层级与语义层级不一致。
为了确保旧版浏览器中 h1 始终保持最高层级，需使用 CSS 强制指定样式。推荐使用 :where() 选择器设置 margin-block 和 font-size，以避免覆盖其他样式规则。例如，设置 margin-block 为 0.67em，font-size 为 2em，可强制 h1 在所有上下文中保持一致的大小和间距，避免因浏览器默认行为导致的层级混乱。
屏幕阅读器如何根据文档大纲导航
屏幕阅读器用户常通过快速跳转标题来浏览页面内容。文档大纲由 h1 至 h6 的层级关系决定，跳转顺序必须严格遵循层级递增。如果页面中存在多个 h1，或者嵌套 h1 被错误渲染为 h2，屏幕阅读器生成的标题列表会失去层级逻辑，导致用户无法快速定位内容。
例如，若页面结构为 h1 主标题后紧跟 h3 子标题，屏幕阅读器会生成不连续的标题列表，用户可能困惑于缺失的 h2。正确的做法是保持层级连续，如 h1 后接 h2，再接 h3。这有助于屏幕阅读器生成清晰的导航列表，帮助用户理解页面结构并快速跳转至感兴趣的部分。
检查嵌套 h1 渲染层级与文档大纲的方法
使用浏览器开发者工具检查 h1 元素的计算样式，确认 font-size 是否为 2em。若在 section 内的 h1 显示为 1.5em 或更小，说明未应用强制样式。同时，使用屏幕阅读器或辅助功能测试工具（如 NVDA）朗读页面，检查生成的标题列表是否包含所有 h1 元素且层级正确。
若发现渲染层级异常，需在 CSS 中添加强制样式。例如，使用 :where(h1) { margin-block: 0.67em; font-size: 2em; } 确保所有 h1 保持一致。验证时，重新加载页面并检查开发者工具中的样式面板，确认 font-size 已更新为 2em，同时使用辅助工具朗读标题列表，确保层级连续。
避免跳级标题与保持文档结构清晰
文档大纲要求标题层级严格递增，避免跳级（如直接从 h1 跳到 h3）。跳级会导致屏幕阅读器生成的标题列表不连续，用户可能迷失在页面结构中。例如，h1 后接 h3 而无 h2，屏幕阅读器会生成不完整的列表，影响导航体验。
正确的标题嵌套应遵循 h1 -> h2 -> h3 的顺序。若内容需要更细的层级，可使用 h4、h5、h6。例如，h1 主标题下包含多个 h2 章节，每个章节下再分 h3 子章节。这种结构符合文档大纲规范，有助于屏幕阅读器生成清晰的导航列表，提升可访问性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。