HTML模态窗口中顶部div应使用何种层级的Heading标题？

在HTML中创建模态窗口时，标题层级的选择得结合页面整体语义结构和可访问性要求来定：

• 首先，页面的主标题应该用唯一的<h1>，它对应整个页面的核心主题。模态窗口只是页面上弹出的临时内容块，不属于页面主主题，所以不能把模态窗口的标题设为<h1>。
• 最规范的选择通常是<h2>：它和页面中其他次级内容块的标题层级保持一致，既能明确模态窗口内容的独立性，又不会破坏整个页面的标题层级逻辑，同时也适配屏幕阅读器等辅助设备的识别规则。
• 要是你的页面已经有多层标题结构（比如页面主内容用<h1>，下方模块用<h2>，模块内子内容用<h3>），那模态窗口的标题层级要和触发它的上下文层级匹配——比如从<h2>模块弹出的模态窗口，标题可以用<h3>，不过这种场景不多，大部分情况下用<h2>就足够合规。

举个实际代码示例：

<!-- 页面主标题 -->
<h1>个人中心</h1>

<!-- 页面内容模块 -->
<section>
  <h2>账号管理</h2>
  <button>修改密码</button>
</section>

<!-- 模态窗口 -->
<div class="modal">
  <h2>修改密码</h2>
  <input type="password" placeholder="原密码">
  <input type="password" placeholder="新密码">
</div>

内容的提问来源于stack exchange，提问作者FeKuLa