产品列表图像替代文本可访问性的最佳做法（和法律）是什么？

Question

我正在尝试确定哪种结构最适合典型的电子商务产品列表页面。 我已经查看了 WCAG 和其他来源，但到目前为止还没有找到最终的解决方案。 典型的产品列表包含图像和产品名称，两者都链接到产品详细信息页面。 我想到了几种模式......

---

带有空 alt 文本的单个链接

我的想法是，最好将这两个组合到同一个<a>标签中，然后在图像上设置alt="" ，这样产品名称将描述链接的全部目的。

方法一

<a href="/my-product">
    <img src="image.jpg" alt="">
    <span class="product-name">Squeaky Fox Dog Toy</span>
</a>

这样做的好处是它使交互元素保持干净，并且易于通过键盘和屏幕阅读器链接列表（如 VoiceOver 中的转子）进行导航。

---

重复的链接和产品名称

我在经过可访问性诉讼和后续补救的知名网站上看到的另一种非常常见的模式是为两者提供单独的链接......

方法二

<a href="/my-product"><img src="image.jpg" alt="Squeaky Fox Dog Toy"></a>
<a href="/my-product" class="product-name">Squeaky Fox Dog Toy</a>

然而，这对于键盘用户来说似乎是一种非常糟糕的体验，他们现在必须通过 Tab 键浏览这两个元素才能获得他们想要的产品。 对于屏幕阅读器用户来说，这似乎也很糟糕，因为他们在尝试查找所需内容时必须听取重复的产品名称。

---

图像上更具描述性的替代文字

我对前两种方法的一个担忧是它们可能不完全符合WCAG 1.1.1 非文本内容 - A 级。 产品名称本身是否“起到同等作用”？ 对于产品详细信息页面上的这些相同图像，我通常会建议更具描述性，以便为用户提供视觉用户看到的有关图像内容的更多信息。 在这方面，产品名称很少能满足传递足够信息的要求。 然而，在列表页面上，我觉得这样做会给屏幕阅读器用户带来不应有的负担，他们现在必须仔细听图像描述，而他们只想看看有哪些产品可用，select 一个。 这种详细程度似乎只能在实际产品详细信息页面上得到保证。

方法三

<a href="/my-product"><img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms"></a>
<a href="/my-product" class="product-name">Squeaky Fox Dog Toy</a>

或者

方法四

<a href="/my-product">
    <img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
    <span class="product-name">Squeaky Fox Dog Toy</span>
</a>

---

我的问题

所以，我想我真的有三个问题......

1. 哪种方法最适合用户？
2. 哪些方法（如果有）不满足 WCAG AA 级，因此不符合美国、欧盟等的法律。
3. 产品列表页面中的图像会被归类为“装饰性”吗？

我怀疑方法 1 是最好的。 到目前为止，我发现的唯一支持这一点的文档是在 W3C 网站上关于装饰图像作为文本链接的一部分的部分......假设 PLP 图像可以归类为“装饰”。

Answer 1

很好的问题，你显然做了很多研究。

让我从你的第二个问题开始

2. 哪些方法（如果有）不满足 WCAG AA 级，因此不符合美国、欧盟等的法律。

您的所有想法在技术上都会通过 WCAG，这使您的第一个问题更加重要 - 什么对用户最好。 WCAG 是创建可供最广泛用户群访问的应用程序的最低标准，但它们确实是最低标准。 您可以拥有一个非常不可用但可以访问的网站，因此您想超越 WCAG。

此外，WCAG 可能非常主观。 关于您提到的 WCAG 1.1.1，一个人可能会说您的示例失败，而另一个人可能会说他们通过了。 没有关于“服务于同等目的”的含义的官方定义。 这是一个主观的决定。

我可以找到您所有解决方案的优缺点，因此这里有一些需要考虑的事项。

方法 1：您将产品图片视为装饰性的，因此没有替代文字。 （好吧，它有alt 文本，但它是空字符串，这很好。您也可以单独使用alt而没有="" ，这意味着同样的事情。）但是，一个问题是，如果您有一个用户较低的带宽，也许图像不会加载。 或者图像加载可能已关闭。 或者你的URL到图片位置不好。 然后，您将在图片所在的位置有一个空框。 您的链接中仍然有文本，因此屏幕阅读器会宣布它是正确的，有远见的人会看到文本，但用户可能想知道该框中属于什么。 使用描述性替代文本，替代文本将显示在图像附近。 每个浏览器往往以不同的方式显示丢失的图像。

方法 2：对于键盘或屏幕阅读器用户来说，这不是最佳体验，但我不确定我会说这是“非常糟糕”的体验。 许多（有视力的）键盘用户只能按Tab键两次，这没什么大不了的。 我经常需要按住 Tab 键才能通过许多制表位，但我是一个有视力的键盘用户，所以它不会打扰我。 但是一些辅助技术更难通过多个制表位，例如sip and puff device ，因此减少制表位始终是一件好事，但 WCAG 并不要求这样做。

方法 3：与方法 2类似，但替代文本更具描述性。 您必须开始权衡替代文本（或空替代文本）中的简洁选项和（过于）描述性的选项。 这是一个主观决定，通常需要进行一些可用性测试。

方法 4：通过仅使用一个制表位来改进方法 2 ，但现在它会同时显示替代文本和链接文本，因此链接文本对于屏幕阅读器用户来说可能过于冗长。

我经常使用与您的方法 4接近的模式，但我不希望使用链接文本读取替代文本，因此我使用aria-labelledby 。 （当我要宣布的文本已经在屏幕上时，我使用aria-labelledby labelledby，所以我可以直接引用它，而aria-label是一个文字字符串，我不喜欢重复aria-label中的文本和屏幕上的文字。）

方法五：

<a href="/my-product" aria-labelledby="foxy">
    <img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
    <span id="foxy" class="product-name">Squeaky Fox Dog Toy</span>
</a>

方法 5的一些好处：

• 一个制表位
• 屏幕阅读器的链接文本公告不会太罗嗦
• 如果无法加载图像，将显示替代文本
• 屏幕阅读器用户仍然可以通过<img>元素（许多屏幕阅读器的G键）导航并听到描述

我相信您也可以在方法 5中戳洞。 几乎所有解决方案都会有缺点。

更新我花了很长时间才输入我的答案，以至于您在 OP 中添加了第三个问题。 图像是否具有装饰性，无论是在产品列表页面 (PLP) 还是产品详细信息页面 (PDP) 中，仍然有些主观。 作为最佳实践（WCAG 不要求），人们会认为 PDP 会包含更多关于产品的详细信息，因此可能需要在图像上添加非常具有描述性的文本。 但这些细节也可能存在于产品文本中，因此实际图像上不需要。

Answer 2

哪种方法最适合用户？

给出的选项中的方法 1 是最好的。

哪些方法（如果有）不满足 WCAG AA 级，因此不符合美国、欧盟等的法律。

他们都不会让 WCAG 失败。

然而，正如您所指出的，2 和 3 会导致键盘用户重复工作，并链接到具有不同名称的同一位置，这在任何成功标准下都不算失败，但强烈推荐。

产品列表页面中的图像会被归类为“装饰性”吗？

在场景 1 和 4 中是。

扩展给出的答案

给出的所有 4 个示例都将“通过”WCAG。 然而，它们提供了截然不同的体验。

所以问题是我们在考虑可访问性方面有哪些？

首先是键盘操作性。 正如您所指出的，示例 2 和示例 3 会导致同一项目的焦点停止重复。 所以我们应该避免它们。

第二件事是链接目的。 然而，示例 2 和 3 在这里也不是很好，因为我们有 2 个链接指向同一页面上的同一位置，它们具有辅助技术将使用的不同可访问标签/文本。

因此，我们可以排除选项 2 和 3 以获得最佳实践。

那么选项 1 和 4 呢？

由于项目位于超链接内，我们希望链接文本（这些链接的可访问名称）能够描述我们将要访问的产品页面。

作为这样的选项，一个将显示为：“链接：Squeaky Fox Dog Toy”，第二个链接将显示为“链接：（图片）带有白色编织绳臂的红狐毛绒狗玩具，Squeaky Fox Dog Toy”

第二种选择会导致信息重复，因此不如第一种选择理想。

所以我们选择了选项 1。

您现在唯一要考虑的是链接文本是否充分描述了产品。 现在，如果您销售多个狗玩具（不同产品类型），那么您需要描述它们的文字，即“塑料狗玩具”和“毛茸茸的狗玩具”。

如果您销售不同颜色的产品并且它们都有自己的页面（因此您在最后一页没有颜色选择器，它们被列为单独的项目）那么您也需要在那里描述颜色。 “红色毛绒狗玩具”、“蓝色毛绒狗玩具”。

从本质上讲，您需要提供足够的信息，以便每个产品链接都能轻松识别其指向的位置（链接本身的目的）。

这是判断力发挥作用的地方，提供足够的信息以在页面上以独特的方式描述产品，而不是因为 100 个产品和 200 个单词的链接文本而导致浏览该页面出现问题的信息。

因此，在给出的示例中，“平衡”将类似于“红狐狸毛绒狗玩具”，然后在产品页面上更详细地描述外观，在描述或产品图片 alt 属性中使用。

选项 5 - 如果您根本没有文本。

值得注意的是，产品页面的最后一个选项是根本没有文本。 只是链接中的图像。 以下内容也是有效的 HTML 并且可以访问，因为替代文本将用作链接文本（如果图像包含所有应该出现在alt属性中的文本则不行）。

<a href="/my-product">
    <img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
</a>

额外权力

有时您可能无法控制链接本身的内容（也许替代文本是集中管理的，或者您对每个项目都有描述，这会使链接文本过于冗长。）

在这种情况下，您可以回退到 WAI-ARIA（总是最后的手段）并提供链接文本：

<a href="/my-product" aria-label="DESCRIPTION THAT OVERRIDES ALL CONTENT">
    <img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
    <span class="product-name">Squeaky Fox Dog Toy</span>
    <p class="long-and-verbose-description">Way too much information for a link that is overridden by the aria-label</p>
</a>

相关指引

• 结合链接文本和相邻图像
• 将链接与其所属的标题相关联的技术（如果您将产品分成页面上的部分