对于我们只知道它是由用户上传的图像，合适的 alt 标签是什么？

Question

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

1. 空 alt 标签alt=""。屏幕阅读器不会阅读任何内容。
2. Alt 标记说它是用户上传的 alt="customer uploaded content"。这将对每张图片重复相同的操作。
3. 与 (2) 相同，但为图像提供一个索引以显示它们的数量alt='${index} customer uploaded content'。
4. 完全省略 alt 属性。

在这种特定情况下，我不太关心 SEO，而不是可访问性。我不确定最佳做法是什么，以及让屏幕阅读器读出重复内容是否可能会很糟糕。

Answer 1

specification has exhaustive information about this 包括一个部分When a text alternative is not available at the time of publication：

在某些情况下，已发布文档中包含图像，但作者无法提供适当的替代文本。在这种情况下，最低要求是在以下条件下使用 figure 和 figcaption 元素为图像提供标题

（截图）

在此示例中，作为批量上传许多图像的一部分，一个人将照片上传到照片共享网站。用户没有为图像提供替代文本或标题。该网站的创作工具会使用它对图像的任何有用信息自动插入标题。在这种情况下，它是文件名和照片拍摄日期。

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

---

在这种特定情况下，我不太关心 SEO，而不是可访问性。我不确定最佳做法是什么，以及让屏幕阅读器读出重复内容是否可能会很糟糕。

让屏幕阅读器用户可以轻松跳过该部分。利用<section> 元素和<h1> 和朋友。这样，当他们收到“部分：客户照片”的公告时，他们可以跳到下一个标题。

Answer 2

我自己是屏幕阅读器用户，我会根据情况投票给#1 或#3。

你的#4，没有替代文字，无论如何是最糟糕的。许多屏幕阅读器通过提供文件名甚至完整的 URL 来呈现不带 alt 的图像。这总是一个完全无用的烦恼。

您的#2，像“用户上传的内容”这样的通用替代文本更好，但如果连续有几张图片，经验不足的用户可能会认为他们已经到达页面底部，或者屏幕阅读器和/或网站有问题。 对于更高级的用户，它无论如何都没有有用的信息。

您的#3，一个带有“照片 1”、“照片 2”、“照片 3”、“照片 4”等索引的通用替代文本优于 #2。由于 alt 文本的索引不同，因此您不能认为您已到达页面末尾或某些地方有问题。 它仍然没有有用的信息。

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

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

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

在所有其他情况下，出于上述原因，我会选择 #1。

当然，真正的最佳解决方案是允许用户在编辑内容时提供替代文本，并对他们进行相关教育。 你可能会争辩说这是一个描述，它会帮助他们找回他们的图像；如果您允许他们访问一个地方，他们可以在一个页面中查看他们在网站上上传的所有内容，或者如果您允许他们提前上传图片，这将非常有用。

Answer 3

我想说这样说：

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

它说明图片中的产品是什么，并且是用户上传的。

Answer 4

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