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

Question

我正在尝试确定对于典型的电子商务产品列表页面来说哪种结构是最好的。我查看了 WCAG 和其他来源，但尚未找到明确的解决方案。典型的产品列表包含图像和产品名称，两者都链接到产品详细信息页面。我想到了几种模式...带有

---

空替代文本的单个链接

我的想法是最好将这两者组合到同一个 标记中，然后设置 图片上的 alt="" 因此产品名称将描述链接的整个用途。

方法 1 的

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

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

---

重复的链接和产品名称

我在已经经历过可访问性诉讼和后续补救措施的知名网站上使用的另一个非常常见的模式是为两者提供单独的链接...

方法 2

<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>

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

---

图像上更多描述性替代文本

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

方法 3

<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>

或

方法 4

<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

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

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

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

您的所有想法都会技术上通过 WCAG，这使得您的第一个问题更重要的是——什么对用户来说是最好的。 WCAG 是创建可供最广泛用户群访问的应用程序的最低标准，但它们确实是最低标准。您可能拥有一个非常无法使用但可访问的网站，因此您希望将目光投向 WCAG 以外的领域。

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

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

方法 1：您将产品图片视为装饰性图片，因此没有替代文字。 （嗯，它有 alt 文本，但它是空字符串，这很好。您也可以单独拥有 alt 而无需 =""但是，有一个问题是，如果您的用户带宽较低，则可能无法加载图像。或者可能会关闭图像加载。或者您的图像位置 URL 不正确。然后你就会在应该放图片的地方看到一个空盒子。链接中仍然有文本，因此屏幕阅读器可以正常宣布它，并且有视力的人会看到文本，但用户可能想知道该框中属于什么。对于描述性替代文本，替代文本将显示在图像附近。每个浏览器往往会以不同的方式显示丢失的图像。

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

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

方法 4： 对方法 2 进行了改进，只有一个制表位，但现在它会导致 同时 替换文本和链接文本被公布，因此对于屏幕阅读器用户来说，链接文本可能过于冗长。

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

方法 5：

<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：

• 一制表位
• 为屏幕阅读器提供 链接文本公告不太冗长
• 如果无法加载图像，
• 屏幕阅读器将显示替代文本 用户仍然可以通过 元素进行导航（许多屏幕阅读器的 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 文本将用作链接文本（如果图像包含任何应全部出现在 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>

相关指南

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