弹窗（Lightbox）场景下重复使用H1标签是否符合语义及无障碍规范？

先看你提供的代码：

<h1>My Lightbox Demo</h1>
<h2>Thank you for trying this</h2>
<div>
    <button aria-controls="lightbox" aria-visible="false" type="button">Click me!</button>
</div>
<div id="lightbox" role="dialog" style="display: none;" aria-live="polite">
<h1>The Lightbox</h1>
<p>It worked!</p>
</div>

下面逐个解答你的问题：

1. 该写法是否符合语义化与无障碍要求？ #

不符合，存在多处关键问题：

• 按钮使用了非标准的aria-visible属性，正确应该用aria-expanded标记弹窗的展开/收起状态，初始值设为false。
• 弹窗的dialog角色缺失核心无障碍属性：
  • 没有aria-modal="true"，屏幕阅读器无法识别这是模态弹窗，用户仍能操作背景内容，完全破坏了模态交互的无障碍逻辑。
  • 缺少焦点管理（即使JS实现了显示逻辑，焦点切换也是必须的）：弹窗打开后焦点要自动移到弹窗内（比如关闭按钮或标题），关闭后要回到触发按钮，否则屏幕阅读器用户会迷失交互位置。
  • aria-live="polite"在这里属于冗余设置，live区域适用于自动更新的内容，而弹窗是用户主动触发的，不需要实时播报。
• 重复的<h1>违反了常规的标题层级逻辑，打乱了页面的语义结构。

2. 是否会给屏幕阅读器用户带来问题？ #

肯定会，主要影响包括：

• 按钮状态标识错误，屏幕阅读器无法准确告知用户点击按钮后的状态变化。
• 无aria-modal的弹窗会让屏幕阅读器继续读取背景内容，用户无法专注于弹窗内的信息。
• 两个<h1>会让依赖标题导航的用户混淆页面结构，误以为存在两个独立的主内容区域。
• 缺少焦点管理会导致弹窗打开后焦点停留在背景，用户需要手动切换焦点，操作体验极差。

3. 是否必须将第二个H1改为H3？ #

不是必须改成H3，但必须调整标题层级。
更合理的做法是把弹窗内的标题改成<h2>，因为弹窗是页面的次级内容，保持标题层级从<h1>到<h2>的递进。当然也可以根据实际内容深度调整为<h3>，核心是避免重复使用<h1>，维持页面语义结构的清晰。

如果坚持要在弹窗内用<h1>，需要配合aria-labelledby让弹窗关联自身标题，同时添加aria-modal="true"明确弹窗的独立上下文，但这种做法仍可能让依赖标题导航的用户困惑，所以更推荐遵循单一<h1>的规范。

4. 是否存在允许重复使用H1的ARIA角色？ #

没有专门允许重复<h1>的ARIA角色，但可以通过一些属性优化，降低重复<h1>的负面影响：

• 给弹窗添加aria-modal="true"，让屏幕阅读器将弹窗视为独立的交互上下文，暂时忽略页面其他内容。
• 使用aria-labelledby="lightbox-title"，同时给弹窗内的<h1>加上id="lightbox-title"，明确弹窗的标题关联。
• 配合完善的焦点管理，确保弹窗打开后焦点自动移到标题或关闭按钮，让用户明确当前处于弹窗环境。

但即使做了这些优化，重复<h1>还是会破坏页面的整体语义结构，所以不推荐这么做。

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