如何语义化/无障碍地使用<details>标签为图片添加长说明？

正确实现方案 #

你可以通过语义标签搭配无障碍属性完成关联，具体实现逻辑如下：

• 外层使用 <figure> 标签包裹图片与 <details> 元素，<figure> 的原生语义就是承载独立媒体内容及配套说明，天然适配该场景
• 给 <details> 设置唯一 ID，同时为图片添加 aria-details 属性指向该 ID，屏幕阅读器会自动识别二者的关联，告知视障用户该图片存在可展开的详细说明
• 你当前设置的图片 alt 文本与 <summary> 内容一致是合理的：alt 是图片加载失败/无障碍访问场景下的基础描述，summary 是折叠详情块的入口提示，二者内容对齐不会冗余，反而能降低用户理解成本

优化后的完整代码示例 #

<figure>
  <img 
    src="https://placeimg.com/150/100/nature" 
    alt="Epcot主题公园"
    aria-details="epcot-detail"
  >
  <details id="epcot-detail">
    <summary>Epcot主题公园</summary>
    <p>Epcot是华特迪士尼世界度假区的主题公园，包含精彩游乐设施、国际展馆、获奖级烟花表演和季节性特别活动。</p>
  </details>
</figure>

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