如何避免h1内的br元素被VoiceOver识别为分组？

方法1：通过aria-label指定完整标题文本 #

给<h1>添加aria-label属性，直接定义屏幕阅读器应播报的完整标题内容，VoiceOver会优先读取该属性值，不再拆分<br>分隔的内容：

<h1 aria-label="This is a headline">This is a <br>headline</h1>

注意：aria-label的文本必须与视觉显示内容完全一致，避免视觉与听觉信息脱节。

方法2：用CSS换行替代<br>（若允许调整实现方式） #

如果可以不依赖<br>元素，改用CSS实现强制换行，既能满足设计需求，也不会触发VoiceOver的分组识别：

<h1>
  <span style="display: block;">This is a</span>
  headline
</h1>

或使用white-space: pre-line（适合内容本身含换行符的场景）：

<h1 style="white-space: pre-line;">This is a
headline</h1>

方法3：结合aria-hidden与aria-labelledby（进阶方案） #

保留视觉上的<br>换行，同时通过隐藏的完整文本节点让屏幕阅读器读取连贯内容：

<span id="full-heading" hidden>This is a headline</span>
<h1 aria-labelledby="full-heading">This is a <br aria-hidden="true">headline</h1>

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