对于一张我们只知道它是由用户上传的图片,合适的 alt 标签是什么?

What is the appropriate alt tag for an image where we only know that it was uploaded by a user?

在我们的网站上,我们有一个例子,显示我们销售的产品的不同用户上传的图像列表。除了我们在页面上销售的产品之外,我们没有任何关于图像是什么的上下文。以下是我们讨论过的各种选项:

  1. 空 alt 标签 alt=""。屏幕阅读器什么也读不到。
  2. Alt 标签表示它是用户上传的 alt="customer uploaded content"。这会对每张图片重复同样的事情。
  3. 与 (2) 相同,但为图像提供索引以显示图像的数量 alt='${index} customer uploaded content'
  4. 完全省略 alt 属性。

在这个具体案例中,我不太关心 SEO,而更关心可访问性。我不确定最佳做法是什么,如果让屏幕阅读器读出重复的内容可能会很糟糕。

我想这样说:

alt="Image of {product}, uploaded by {user}"

说明图片中的产品是用户上传的。

假设您正在构建一个动态网络应用程序,您可以尝试 Tobias 的尝试并在 alt 标签中插入动态内容。否则我认为你必须坚持解决方案 2) 因为你不能动态化 html.

中的内容

specification has exhaustive information about this including a section When a text alternative is not available at the time of publication:

In some cases an image is included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum requirement is to provide a caption for the image using the figure and figcaption elements under the following conditions

(剪断)

In this example, a person uploads a photo, as part of a bulk upload of many images, to a photo sharing site. The user has not provided a text alternative or a caption for the image. The site’s authoring tool inserts a caption automatically using whatever useful information it has for the image. In this case it’s the file name and date the photo was taken.

<figure>
<img src="clara.jpg">
<figcaption>clara.jpg, taken on 12/11/2010.</figcaption>
</figure>

I am less concerned about SEO in this specific case than I am accessibility. I'm not sure what the best practice is and if having screen readers read out repetitive content could potentially be bad.

使屏幕 reader 用户可以轻松跳过该部分。利用 <section> 元素和 <h1> 和朋友。这样当他们收到通知时 "Section: Customer photos",他们可以跳到下一个标题。

我自己是屏幕 reader 用户,我会根据情况投票给#1,或者#3。

你的#4,没有替代文字,无论如何都是最糟糕的。许多屏幕 reader 通过提供文件名甚至完整 URL 来渲染图像而不使用 alt。这总是一个完全无用的烦恼。

你的 #2,像 "User uploaded content" 这样的通用替代文字更好,但如果连续有几张图片,经验不足的用户可能会认为他们已经到达页面底部,或者屏幕 reader and/or 网站有问题。 对于更高级的用户来说,反正没什么用。

你的 #3,一个通用的替代文本,索引如 "Photo 1"、"Photo 2"、"Photo 3"、"Photo 4" 等,比 #2 更好。由于替代文本的索引不同,您不能认为您已到达页面末尾或有问题。 还是没有什么有用的信息。

但是,我认为您最好的解决方案是 #1,一个空的替代文本。 由于图像无论如何都没有提供有用的信息,因此最好完全跳过它们。实际上,当出现此类图像时,我们每天都会这样做。

在一种情况下,我会推荐 #3 而不是 #1:如果您可以通过单击图像来执行某些操作。 在这种情况下,空的替代文本会阻止屏幕 reader 用户启动操作。图片链接、按钮和其他可操作元素必须始终具有 non-empty 替代文本。

#3 可能有用的另一种情况是我本人是内容的作者。在这种情况下,我可能想检查我的图片是否已正确上传并插入到我希望它们出现的位置。

在所有其他情况下,出于上述原因,我会选择第一。

当然,真正最好的解决方案是允许用户在编辑内容时提供替代文本,并就此对他们进行培训。 你可能会争辩说这是一种描述,它会帮助他们找回他们的形象;如果您允许他们访问一个地方,他们可以在一个页面上看到他们在网站上上传的所有内容,或者如果您允许他们提前上传图片,这将非常有用。