可访问性-<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

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

当无法显示图片时（例如，由于用户是盲人，或者由于用户穿过隧道而没有加载图片），替换文字会替换图片。

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

某些图像完全是装饰性的（alt=""）或仅包含也通过附近文本传达的信息（alt=""）。许多网站都会在页面上显示公司徽标，这是因为Google新闻网站上菜单图标旁边的图像所传达的信息是它是Google新闻网站（alt="Google News"），而不是图片中包含Google新徽标（因此不是 alt="Logo"或alt="Google News Logo"）。

Answer 2

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

• 功能图片
• 插图图像又称数字

顾名思义，figcaption是人物的标题。字幕总是对所有人可见，不仅盲人。 图形是可以在书，文章或任何或多或少长文本段落中找到的图像。 大多数情况下，数字仅是说明性的。

使用figcaption时，alt属性应该为空：

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

现在，当您不使用图形/插图时，最大的情况就是图像正常工作： 可以单击按钮，具有精确含义的图标等。 功能图像替代文本的基本规则是：

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

Answer 3

如术语所示，它们与事实不同，其中一个是 alt 代词（当看不到图像时），而另一个是（ fig ）字幕（且始终可见）。

标题是您希望显示的信息。例如版权，作者姓名，对象标题。例如，将版权放在alt属性中是毫无用处的（SEO除外）。

alt属性将可用于替换图像的内容。例如，如果您的图像是带有公司名称的徽标，则alt将包含它作为替代文本。