html - 辅助功能 - <img alt> 和 <figcaption> 之间的区别

Question

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

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

Example from 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 属性可能应该是空的:

• 将图形标题的文本复制到 alt 属性中，或任何缩短的版本，几乎总是没有用的:屏幕阅读器将阅读两次相同或几乎相同的信息，这绝对没有任何值(value)
• 您可能认为 alt 属性对于图像的较长描述可能很有用，这不适合 figcaption；例如图表或图表的详细描述。但实际上，这种描述最好在图片下方或另一个页面中(然后提供给所有人)，而不是在alt属性中。 alt 属性通常应保持简短。
• 您可能认为 figcaption 没有用，只是将 alt 属性设置为某物。示例:“左边是爱丽丝，右边是鲍勃的照片”。但事实上，如果有视力的人不认识爱丽丝和鲍勃，他们也会发现这些信息很有用。因此，将此描述移动到图形说明中可能会很有趣，这样每个人都能从中受益，而不仅仅是盲人。

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

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