如何在figure元素外部指定关联caption并保证语义和无障碍合规

方案有效性判断 #

你当前使用aria-describedby关联分离排布的figure与图注的实现是符合HTML语义规范、无障碍要求的可行方案，没有逻辑错误。

优化建议 #

可以对现有实现做如下调整进一步增强兼容性：

• 无需将图注强制改为div元素，可直接使用<figcaption>标签承载内容，保留原生图注语义
• 可选给图注元素增加role="caption"属性，进一步强化辅助工具对其图注角色的识别
• 确保所有图注关联使用的id全局唯一，避免多图场景下出现关联错误

优化后代码示例 #

<!-- 图片区域 -->
<figure aria-describedby="fig1-caption">
  <img src="..." alt="图片替代文本"/>
</figure>

<!-- 中间其他页面结构 -->

<!-- 底部图注区域 -->
<figcaption id="fig1-caption" role="caption">
  图1：对应图片的说明文本内容
</figcaption>

实现说明 #

原生HTML规范要求<figcaption>必须为<figure>的直接子元素才会自动建立关联，物理分离的场景下原生关联机制失效，通过ARIA属性绑定的方案刚好补足了这个场景的能力，该方案对主流屏幕阅读器、浏览器的兼容性良好，可正常通过W3C校验。

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