在语义化与可访问性前提下如何合理使用多个 H1 标签

HTML 允许且支持在单页中使用多个 <h1> 标签，关键在于遵循“每个独立内容区域一个主标题”的语义原则；现代屏幕阅读器能正确解析嵌套或动态展示的 H1（如模态框内），无需降级为 H3，但需配合正确的 ARIA 属性与 DOM 结构。

html 允许且支持在单页中使用多个 `

` 标签，关键在于遵循“每个独立内容区域一个主标题”的语义原则；现代屏幕阅读器能正确解析嵌套或动态展示的 h1（如模态框内），无需降级为 h3，但需配合正确的 aria 属性与 dom 结构。

在 Web 语义化与无障碍实践中，<h1> 并非“页面唯一”的硬性限制，而是代表一个独立内容区块的最高层级标题。HTML5 的大纲算法（尽管主流浏览器未完全实现）明确支持基于 <section>、<article>、<nav>、<dialog> 等语义容器的标题作用域隔离——这意味着，只要结构合理，多个 <h1> 不仅合法，而且更准确。

以你提供的 Lightbox 示例为例：

<h1>My Lightbox Demo</h1><h2>Thank you for trying this</h2><div>  <button aria-controls="lightbox" type="button">Click me!</button></div><div id="lightbox" role="dialog" aria-modal="true" aria-labelledby="lightbox-title" style="display: none;">  <h1 id="lightbox-title">The Lightbox</h1>  <p>It worked!</p>  <button aria-label="Close lightbox">✕</button></div>

✅ 这是语义正确且无障碍友好的写法，原因如下：

• role="dialog" + aria-modal="true" 明确告知辅助技术：该区域是一个模态对话框，具有独立的上下文；
• aria-labelledby="lightbox-title" 将对话框的可访问名称绑定到内部 <h1>，确保屏幕阅读器进入时能自然播报“对话框：The Lightbox”；
• 内部 <h1> 在逻辑上是 Lightbox 这一独立内容单元的主标题，与主文档的 <h1> 并不冲突——二者分属不同语义作用域；
• 无需将第二个 <h1> 改为 <h3>：人为降级标题层级反而会破坏语义结构，误导用户对内容重要性的判断。

⚠️ 注意事项：

• 避免在普通流式内容中无节制堆砌 <h1>（例如连续多个 <h1> 无语义分隔），这会削弱标题的权威性并干扰大纲生成；
• 动态显示的 Lightbox 必须确保：显示时 aria-modal="true" 生效、焦点受控（首次打开应聚焦到标题或首个可交互元素）、关闭后焦点回归触发按钮；
• 不推荐仅用 aria-visible="false"（该属性不存在），应使用 aria-hidden="true" 控制隐藏状态，并在显示时同步切换。

总结：多个 <h1> 不是反模式，而是 HTML5 语义演进的重要体现。关键不在“能否用”，而在“为何而用”。只要每个 <h1> 真正承担起其所处内容块的主标题职责，并辅以恰当的 ARIA 角色与属性，它就是清晰、健壮且无障碍合规的最佳实践。