如何为视觉区分的分组结构化内容添加屏幕阅读器隐形标签？

你的思路完全可行，下面给你具体的实现方法和注意事项：

优先方案：视觉隐藏的前置标签 #

这是兼容性最好、最稳妥的方法，所有屏幕阅读器都能识别，也符合WCAG规范。核心是添加一个视觉上不可见，但屏幕阅读器能读取的标签，放在目标元素内容的最前面：

示例代码 #

<!-- 红色框div的处理 -->
<div class="red-box">
  <span class="sr-only">红色框</span>
  <!-- 红框内的具体内容 -->
</div>

<!-- figure里诗歌的处理 -->
<figure>
  <span class="sr-only">诗歌</span>
  <blockquote>
    床前明月光，疑是地上霜。
    举头望明月，低头思故乡。
  </blockquote>
</figure>

视觉隐藏样式（sr-only类） #

这是行业通用的视觉隐藏CSS，确保元素不在页面显示，但能被辅助技术识别：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

备选方案：结合role与aria-label #

如果不想用视觉隐藏标签，也可以给元素添加合适的role后使用aria-label，但要注意兼容性（旧版屏幕阅读器可能不支持）：

• 对于普通div（红框），添加role="region"让屏幕阅读器识别为内容区块，此时aria-label会被读取：

<div role="region" aria-label="红色框" class="red-box">
  <!-- 红框内容 -->
</div>

• 对于figure元素，它本身是原生分组元素，部分现代屏幕阅读器支持直接读取其aria-label：

<figure aria-label="诗歌">
  <!-- 诗歌内容 -->
</figure>

关于你提到的ARIA属性的补充说明 #

1. aria-label的适用范围：并非只限于交互元素，它也支持landmark元素（如section、nav）和带有特定role的元素（如role="region"），但普通无role的div无法直接使用。
2. aria-labeledby/aria-describedby：你的理解是对的，这两个属性用于关联可见的标题或补充信息，如果没有可见元素，用视觉隐藏标签配合它们也可以，但不如直接前置视觉隐藏标签直观。
3. aria-description：这个属性属于较新规范，支持性不足，且很多编辑器（比如你提到的Oxygen）尚未适配，不建议使用。

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