语义/可访问地正确使用 <details> 作为图像标题？

Question

我有一些很长的图片标题，我想使用<details> 标签来容纳这些。但我不确定如何以与 figcaption 和 figure 相同的方式将细节与图像进行语义/可访问地关联。

这样做的正确方法是什么？

<img src="https://placeimg.com/150/100/nature" alt="Epcot theme park" />
<details>
  <summary>Epcot theme park</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

这里的替代文字和摘要标题是一样的。

Answer 1

您可以使用<figure> 和<figcaption> 元素以编程方式将<details> 元素的内容与<img> 元素相关联，如示例所示：

<figure>
    <img src="https://placeimg.com/150/100/nature" alt="Alt text that's different from your summary">
    <figcaption>
        <details>
            <summary>Epcot theme park</summary>
            <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
        </details>
    </figcaption>
</figure>

<figcaption> 元素接受 flow content，其中包括 <details> 元素。

您可能也有兴趣查看W3C Web Accessibility Tutorials for Complex Images，因为那里有一些非常相关的信息。