如何为视障用户无障碍标记诗歌或歌词？优化屏幕阅读器体验

针对你遇到的屏幕阅读器朗读序号、无法识别诗行句子的问题，以下是两种符合无障碍标准且不修改原文的解决方案：

方案一：语义化段落+ARIA句子标记 #

这种方案既保留诗歌的排版层级，又能让屏幕阅读器正确识别诗节为段落、诗行为独立句子：

HTML代码 #

<div class="stanzas">
  <!-- 单个诗节 -->
  <p class="stanza">
    <span class="line" role="sentence">Roses are red</span>
    <span class="line" role="sentence">Violets are blue</span>
  </p>
  
  <!-- 多个诗节重复上述结构 -->
  <p class="stanza">
    <span class="line" role="sentence">Sugar is sweet</span>
    <span class="line" role="sentence">And so are you</span>
  </p>
</div>

CSS代码 #

/* 诗节间距 */
.stanza {
  margin: 1.5em 0;
  padding: 0;
}

/* 诗行视觉换行 */
.line {
  display: block;
  margin: 0.4em 0;
}

优势 #

• 语义清晰：<p>被屏幕阅读器识别为段落（对应诗节），role="sentence"明确标记每行是独立句子；
• 朗读自然：屏幕阅读器会按句子停顿朗读，无需手动滑动切换行；
• 完全保留原文，无额外修改或取巧技巧；
• 兼容主流屏幕阅读器（TalkBack、VoiceOver、NVDA等）。

方案二：优化列表结构（避免序号朗读） #

如果偏好使用列表组织诗行，可通过ARIA属性屏蔽序号朗读，同时保留语义：

HTML代码 #

<div class="stanzas">
  <ol class="stanza" aria-roledescription="诗节">
    <li class="line">Roses are red</li>
    <li class="line">Violets are blue</li>
  </ol>
</div>

CSS代码 #

/* 隐藏视觉序号 */
.stanza {
  list-style: none;
  padding-left: 0;
  margin: 1.5em 0;
}

.line {
  display: block;
  margin: 0.4em 0;
}

优势 #

• 利用列表的天然层级组织诗行；
• aria-roledescription将默认的“有序列表”描述替换为“诗节”，避免屏幕阅读器读取序号；
• 视觉排版符合诗歌格式。

关键避坑点 #

• 不要通过CSS隐藏添加的句号，这属于无障碍反模式，可能导致屏幕阅读器识别混乱；
• 避免使用纯<div>无语义结构，确保屏幕阅读器能解析内容层级；
• 务必在目标屏幕阅读器上测试实际朗读效果，验证兼容性。

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