可访问性 - <img alt> 和 <figcaption> 之间的区别

Question

有两种方法可以在 HTML 中指定带有图像的“伴随文本”：

• alt 属性
• 一个单独的<figcaption>元素。

来自 w3s 的示例：

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

在可访问性方面，两者有什么区别？放入这些插槽的合适值是什么？例如，应该alt是图片的视觉描述和<figcaption>上下文描述吗？

来自视障用户的意见将不胜感激！欢迎提供额外的建议。

Answer 1

我是盲人用户。我会说网络上有两大类图像：

• 功能图像
• 说明性图像又名数字

顾名思义，figcaption 是图形的标题。每个人都可以看到标题，而不仅仅是盲人。图形是可以在一本书、一篇文章或任何或多或少长的文本段落中找到的图像。大多数时候，数字纯粹是说明性的。

当您使用 figcaption 时，alt 属性可能应该为空：

• 将 figcaption 的文本复制到 alt 属性或任何缩短的版本中，几乎总是无用的：屏幕阅读器将读取两次相同或几乎相同的信息，这绝对没有任何价值
• 您可能认为 alt 属性对于图像的较长描述可能很有用，这不适合 figcaption；例如，图表或图表的详细描述。但实际上，这种描述最好在图片下方或其他页面中（然后可供所有人使用），而不是在 alt 属性中。alt 属性通常应保持简短。
• 你可能认为 figcaption 没有用，只设置了 alt 属性。示例：“左边是 Alice 的照片，右边是 Bob 的照片”。但事实上，如果视力正常的人不认识 Alice 和 Bob，他们也会发现这些信息很有用。所以把这个描述移到 figcaption 可能会很有趣，这样每个人都可以从中受益，而不仅仅是盲人。

现在，当你不使用 figure/figcaption 的最大情况是当图像具有功能性时：可以点击一个按钮，一个具有精确含义的图标等。 功能性图像替代文本的基本规则是：

• 如果您可以与图像交互以执行操作（单击等），或者如果图标传达信息，则必须设置非空 alt。它必须是功能描述，而不是图像的客观描述。
  示例 1：“返回”是好的，而“蓝色左箭头”是坏的。
  示例 2：“未读消息”是好的，而“封闭的信封”是坏的
• 否则，如果图像不提供交互并且不传达任何信息，则它是说明性的；在这种情况下，alt 应该是空的

Answer 2

标题为所有用户提供有关图像的信息。

当图像无法显示时，替代文本会替换图像（例如，因为用户失明，或者因为用户穿过隧道而无法加载图像）。

有时替代文字可以是对图像的描述，但并不总是甚至通常是。它需要传达任何试图传达的信息。

有些图像完全是装饰性的 ( alt="") 或仅包含通过附近文本 ( alt="")传达的信息。许多网站在页面上显示公司徽标，通过谷歌新闻网站菜单图标旁边的图像所传达的信息是它是一个谷歌新闻网站 ( alt="Google News") 而不是图片包含谷歌新徽标 (所以不是 alt="Logo"或alt="Google News Logo"）。