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 角色与属性，它就是清晰、健壮且无障碍合规的最佳实践。
