无障碍开发：如何让带强制换行的标题适配屏幕阅读器？

你当前想到的双h1方案存在明显缺陷：页面重复出现h1标签会破坏文档标题层级语义，不仅不符合HTML规范，还可能被搜索引擎判定为内容作弊，完全没有必要采用。

你最初用<br>实现换行时出现的读屏识别异常，是部分旧版本屏幕阅读器对<br>标签的解析逻辑差异导致的——这类读屏会错误将<br>识别为条目分隔边界，才会报出“2个条目”的提示。目前最新版的主流读屏已经修复了这个问题，但考虑到老版本设备的兼容需求，依然不推荐直接在标题里用<br>做固定位置换行。

推荐方案：单标签+CSS实现，零无障碍问题 #

不需要额外加冗余标签、不需要配置任何ARIA属性，仅靠无语义标签+CSS就能实现和<br>完全一致的视觉换行效果，同时读屏会完整连贯读取整段标题文本，不会出现拆分识别的问题。
代码示例：

<h1>The quick brown fox <span class="line-break"></span>jumps over the lazy dog</h1>

配套CSS：

.line-break {
  display: block;
}

实现逻辑很简单：span本身是无语义行内元素，不会被读屏识别为任何结构分隔符；将其设置为块级元素后，后续文本会自动从新行开始渲染，视觉效果和<br>强制换行完全一致，也符合结构样式分离的开发规范。

如果你的换行需求不需要固定在指定文本位置，只是适配容器宽度的自动换行，连span都不需要加，直接给h1设置对应宽度、配合white-space、word-break属性控制换行规则即可，实现更简洁。

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