产品列表图像替代文本可访问性的最佳做法（和法律）是什么？
What is best practice (and legal) for product listing image alt text for accessibility?
我正在尝试确定哪种结构最适合典型的电子商务产品列表页面。我已经查看了 WCAG 和其他来源，但到目前为止还没有找到最终的解决方案。一个典型的产品列表包含一个图像和一个产品名称，两者都 link 到产品详细信息页面。我想到了几种模式...
单个 link，替代文本为空
我的想法是，最好将这两个组合到同一个<a>标签中，然后在图片上设置alt=""，这样产品名称就会描述[=]的全部用途64=].
方法一
<a href="/my-product">
<img src="image.jpg" alt="">
<span class="product-name">Squeaky Fox Dog Toy</span>
</a>
这样做的好处是它使交互元素保持干净，并且易于通过键盘和屏幕 reader link 列表（如 VoiceOver 中的转子）导航。
重复 link 和产品名称
我在经过可访问性诉讼和后续补救的高知名度网站上看到的另一种非常常见的模式是为两者设置单独的 links...
方法二
<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 键浏览这两个元素才能获得他们想要的产品。对于屏幕 reader 用户来说，这似乎也很糟糕，因为他们在尝试找到他们想要的东西时不得不听重复的产品名称。
图像上更具描述性的替代文字
我对前两种方法的一个担心是它们可能无法完全满足 WCAG 1.1.1 Non-text Content - Level A。产品名称本身是否“起到同等作用”？对于产品详细信息页面上的这些相同图像，我通常会建议更具描述性，以便为用户提供视觉用户看到的有关图像内容的更多信息。在这方面，产品名称很少能满足传递足够信息的要求。但是，在列表页面上，我觉得这样做会给屏幕 reader 用户带来不必要的负担，他们现在不得不听图片的描述，而他们只想看看有哪些产品可用 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>
我的问题
所以，我想我真的有三个问题...
- 哪种方法最适合用户？
- 哪些方法（如果有）不满足 WCAG AA 级，因此不符合美国、欧盟等国家的法律
- 产品详情页面中的图片是否会被归类为“装饰性”图片？
我怀疑方法 1 是最好的。到目前为止，我发现的唯一支持这一点的文档是在 W3C 网站上关于 Decorative image as part of text link 的部分...假设 PLP 图像可以归类为“装饰性”。
哪种方法最适合用户？
给出的选项中的方法 1 是最好的。
哪些方法（如果有）不满足 WCAG AA 级，因此不符合美国、欧盟等国家的法律
None 其中的 WCAG 会因此而失败。
然而，正如您所指出的，2 和 3 会导致键盘用户和 links 到具有不同名称的同一位置的重复工作，这在任何成功标准下都不算失败，但强烈推荐.
产品详情页面中的图片是否会被归类为“装饰性”图片？
在场景 1 和 4 中是。
给出答案的扩展
给出的所有 4 个示例都将“通过”WCAG。然而，它们提供了截然不同的体验。
所以问题是我们考虑了哪些无障碍性？
首先是键盘操作性。正如您所指出的，示例 2 和示例 3 会导致同一项目的焦点停止重复。所以我们应该避免它们。
第二件事是link目的。示例 2 和示例 3 在这里也不是很好，因为我们有 2 links 到同一页面上的同一位置，它们具有辅助技术将使用的不同可访问标签/文本。
因此我们可以排除选项 2 和 3 以获得最佳实践。
那么选项 1 和 4 呢？
由于这些项目位于 内 超级 link 我们需要 link 文本（那些 link 的可访问名称) 来描述我们将要访问的产品页面。
作为这样的选项，第一个会读作：“link：吱吱作响的狐狸狗玩具”，第二个 link 会读作“link：（图片）红狐狸毛绒狗玩具与白色编织绳臂，Squeaky Fox Dog Toy
第二个选项会导致信息重复，因此不如第一个选项理想。
所以我们选择了选项 1。
您现在唯一要考虑的是 link 文字是否充分描述了产品。现在，如果您销售多个狗玩具（不同产品类型），那么您需要描述它们的文字，即“塑料狗玩具”和“毛茸茸的狗玩具”。
如果您销售不同颜色的产品并且它们都有自己的页面（因此您在最后一页没有颜色选择器，它们被列为单独的项目）那么您也需要在那里描述颜色. “红色毛绒狗玩具”、“蓝色毛绒狗玩具”。
本质上，您需要提供足够的信息，以便每个产品 link 都可以轻松识别其用途（link 本身的目的）。
这是判断力发挥作用的地方，提供足够的信息以在页面上以独特的方式描述产品，而不是因为 100 个产品和 200 个单词而导致浏览该页面出现问题的信息 link 文本。
因此，在给出的示例中，“余额”将类似于“红狐狸毛绒狗玩具”，然后在产品页面上更详细地描述外观，在描述或产品图片中显示 alt属性。
选项 5 - 如果您根本没有文本。
值得注意的是，产品页面的最后一个选项是根本没有文字。只是 link 中的一张图片。以下内容也是有效的 HTML 并且可以访问，因为替代文本将用作 link 文本（如果图像包含任何应该全部出现在 alt 属性中的文本则不行） .
<a href="/my-product">
<img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
</a>
额外的权力
有时您可能无法控制 link 本身的内容（也许替代文本是集中管理的，或者您对每个项目都有描述，这将使 link文字太冗长了。）
在这种情况下，您可以 fall-back 到 WAI-ARIA（这是最后的手段）并提供 link 文本：
<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>
相关指引
很好的问题，你显然做了很多研究。
让我开始你的第二个问题
- Which method(s), if any, would NOT satisfy WCAG Level AA and therefor not comply with laws in the US, EU, etc.
您的所有想法在技术上 都会通过 WCAG，这使得您的第一个问题更加重要 - 什么对用户最好。 WCAG 是一个 minimum 标准，用于创建可供最广泛用户群访问的应用程序，但它们确实是 minimum 标准。您可以拥有一个非常不可用但可以访问的网站，因此您想超越 WCAG。
此外，WCAG 可能非常主观。关于您提到的 WCAG 1.1.1，一个人可能会说您的示例失败，而另一个人可能会说他们通过了。关于“ 服务于同等目的”的含义，没有官方定义。这是一个主观决定。
我可以找出你们所有解决方案的优缺点，所以这里有一些事情需要考虑。
方法 1：您认为产品图片是装饰性的，因此没有替代文字。 （好吧，它 有 替代文本，但它是空字符串，这很好。您也可以单独使用 alt 而没有 =""，这意味着同样的事情。）但是，一个问题是，如果您的用户带宽较低并且可能无法加载图像。或者图像加载可能已关闭。或者你的 URL 到图像位置是错误的。然后，您将在图片所在的位置有一个空框。 link 中仍然有文字，因此屏幕 reader 会宣布它正常，有远见的人会看到文字，但用户可能想知道那个框中的内容。使用描述性替代文本，替代文本将显示在图像附近。每个浏览器往往以不同的方式显示缺失的图像。
方法 2： 这不是键盘或屏幕 reader 用户的最佳体验，但我不确定我会说这是“非常糟糕”的体验.许多（有视力的）键盘用户可以 tab 两次，这没什么大不了的。我经常需要按住 Tab 键才能通过许多制表位，但我是一个有视力的键盘用户，所以它不会打扰我。但一些辅助技术更难通过多个制表位，例如 sip and puff device，因此减少制表位始终是一件好事，但 WCAG 并不要求这样做。
方法 3： 与 方法 2 类似，但替代文本更具描述性。您必须开始权衡替代文本（或空替代文本）中的简洁选项和（过于）描述性的选项。这是一个主观决定，通常需要进行一些可用性测试。
方法 4： 改进了 方法 2，只有一个制表位，但现在它会导致 两个 替代文本和 link 文本将被公布，因此 link 文本对于屏幕 reader 用户来说可能过于冗长。
我经常使用与您的 方法 4 接近的模式，但我不想让替代文本与 link 文本一起阅读，所以我使用 aria-labelledby. （当我要宣布的文本已经在屏幕上时，我使用 aria-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 的一些好处：
- 一个制表位
- link 屏幕 readers 的文字公告不太罗嗦
- 如果无法加载图像，将显示替代文本
- 屏幕 reader 用户仍然可以通过
<img> 元素导航（G 键用于许多屏幕 readers）并听到描述
我相信您也可以在 方法 5 中找到漏洞。几乎所有解决方案都会有缺点。
更新
我花了很长时间才输入答案，以至于您在 OP 中添加了第三个问题。图像是否具有装饰性，无论是在产品列表页面 (PLP) 还是产品详细信息页面 (PDP) 中，仍然有些主观。作为最佳实践（WCAG 不要求），人们会认为 PDP 会包含更多关于产品的 详细信息 ，因此可能需要在图像上添加非常详细的描述性文字。但这些细节也可能存在于产品文本中，因此实际图像上不需要。
我正在尝试确定哪种结构最适合典型的电子商务产品列表页面。我已经查看了 WCAG 和其他来源，但到目前为止还没有找到最终的解决方案。一个典型的产品列表包含一个图像和一个产品名称，两者都 link 到产品详细信息页面。我想到了几种模式...
单个 link，替代文本为空
我的想法是，最好将这两个组合到同一个<a>标签中，然后在图片上设置alt=""，这样产品名称就会描述[=]的全部用途64=].
方法一
<a href="/my-product">
<img src="image.jpg" alt="">
<span class="product-name">Squeaky Fox Dog Toy</span>
</a>
这样做的好处是它使交互元素保持干净，并且易于通过键盘和屏幕 reader link 列表（如 VoiceOver 中的转子）导航。
重复 link 和产品名称
我在经过可访问性诉讼和后续补救的高知名度网站上看到的另一种非常常见的模式是为两者设置单独的 links...
方法二
<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 键浏览这两个元素才能获得他们想要的产品。对于屏幕 reader 用户来说，这似乎也很糟糕，因为他们在尝试找到他们想要的东西时不得不听重复的产品名称。
图像上更具描述性的替代文字
我对前两种方法的一个担心是它们可能无法完全满足 WCAG 1.1.1 Non-text Content - Level A。产品名称本身是否“起到同等作用”？对于产品详细信息页面上的这些相同图像，我通常会建议更具描述性，以便为用户提供视觉用户看到的有关图像内容的更多信息。在这方面，产品名称很少能满足传递足够信息的要求。但是，在列表页面上，我觉得这样做会给屏幕 reader 用户带来不必要的负担，他们现在不得不听图片的描述，而他们只想看看有哪些产品可用 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>
我的问题
所以，我想我真的有三个问题...
- 哪种方法最适合用户？
- 哪些方法（如果有）不满足 WCAG AA 级，因此不符合美国、欧盟等国家的法律
- 产品详情页面中的图片是否会被归类为“装饰性”图片？
我怀疑方法 1 是最好的。到目前为止，我发现的唯一支持这一点的文档是在 W3C 网站上关于 Decorative image as part of text link 的部分...假设 PLP 图像可以归类为“装饰性”。
哪种方法最适合用户？
给出的选项中的方法 1 是最好的。
哪些方法（如果有）不满足 WCAG AA 级，因此不符合美国、欧盟等国家的法律
None 其中的 WCAG 会因此而失败。
然而，正如您所指出的，2 和 3 会导致键盘用户和 links 到具有不同名称的同一位置的重复工作，这在任何成功标准下都不算失败，但强烈推荐.
产品详情页面中的图片是否会被归类为“装饰性”图片？
在场景 1 和 4 中是。
给出答案的扩展
给出的所有 4 个示例都将“通过”WCAG。然而，它们提供了截然不同的体验。
所以问题是我们考虑了哪些无障碍性？
首先是键盘操作性。正如您所指出的，示例 2 和示例 3 会导致同一项目的焦点停止重复。所以我们应该避免它们。
第二件事是link目的。示例 2 和示例 3 在这里也不是很好，因为我们有 2 links 到同一页面上的同一位置，它们具有辅助技术将使用的不同可访问标签/文本。
因此我们可以排除选项 2 和 3 以获得最佳实践。
那么选项 1 和 4 呢？
由于这些项目位于 内 超级 link 我们需要 link 文本（那些 link 的可访问名称) 来描述我们将要访问的产品页面。
作为这样的选项，第一个会读作：“link：吱吱作响的狐狸狗玩具”，第二个 link 会读作“link：（图片）红狐狸毛绒狗玩具与白色编织绳臂，Squeaky Fox Dog Toy
第二个选项会导致信息重复，因此不如第一个选项理想。
所以我们选择了选项 1。
您现在唯一要考虑的是 link 文字是否充分描述了产品。现在，如果您销售多个狗玩具（不同产品类型），那么您需要描述它们的文字，即“塑料狗玩具”和“毛茸茸的狗玩具”。
如果您销售不同颜色的产品并且它们都有自己的页面（因此您在最后一页没有颜色选择器，它们被列为单独的项目）那么您也需要在那里描述颜色. “红色毛绒狗玩具”、“蓝色毛绒狗玩具”。
本质上，您需要提供足够的信息，以便每个产品 link 都可以轻松识别其用途（link 本身的目的）。
这是判断力发挥作用的地方，提供足够的信息以在页面上以独特的方式描述产品，而不是因为 100 个产品和 200 个单词而导致浏览该页面出现问题的信息 link 文本。
因此，在给出的示例中，“余额”将类似于“红狐狸毛绒狗玩具”，然后在产品页面上更详细地描述外观，在描述或产品图片中显示 alt属性。
选项 5 - 如果您根本没有文本。
值得注意的是，产品页面的最后一个选项是根本没有文字。只是 link 中的一张图片。以下内容也是有效的 HTML 并且可以访问，因为替代文本将用作 link 文本（如果图像包含任何应该全部出现在 alt 属性中的文本则不行） .
<a href="/my-product">
<img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
</a>
额外的权力
有时您可能无法控制 link 本身的内容（也许替代文本是集中管理的，或者您对每个项目都有描述，这将使 link文字太冗长了。）
在这种情况下，您可以 fall-back 到 WAI-ARIA（这是最后的手段）并提供 link 文本：
<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>
相关指引
很好的问题，你显然做了很多研究。
让我开始你的第二个问题
- Which method(s), if any, would NOT satisfy WCAG Level AA and therefor not comply with laws in the US, EU, etc.
您的所有想法在技术上 都会通过 WCAG，这使得您的第一个问题更加重要 - 什么对用户最好。 WCAG 是一个 minimum 标准，用于创建可供最广泛用户群访问的应用程序，但它们确实是 minimum 标准。您可以拥有一个非常不可用但可以访问的网站，因此您想超越 WCAG。
此外，WCAG 可能非常主观。关于您提到的 WCAG 1.1.1，一个人可能会说您的示例失败，而另一个人可能会说他们通过了。关于“ 服务于同等目的”的含义，没有官方定义。这是一个主观决定。
我可以找出你们所有解决方案的优缺点，所以这里有一些事情需要考虑。
方法 1：您认为产品图片是装饰性的，因此没有替代文字。 （好吧，它 有 替代文本，但它是空字符串，这很好。您也可以单独使用 alt 而没有 =""，这意味着同样的事情。）但是，一个问题是，如果您的用户带宽较低并且可能无法加载图像。或者图像加载可能已关闭。或者你的 URL 到图像位置是错误的。然后，您将在图片所在的位置有一个空框。 link 中仍然有文字，因此屏幕 reader 会宣布它正常，有远见的人会看到文字，但用户可能想知道那个框中的内容。使用描述性替代文本，替代文本将显示在图像附近。每个浏览器往往以不同的方式显示缺失的图像。
方法 2： 这不是键盘或屏幕 reader 用户的最佳体验，但我不确定我会说这是“非常糟糕”的体验.许多（有视力的）键盘用户可以 tab 两次，这没什么大不了的。我经常需要按住 Tab 键才能通过许多制表位，但我是一个有视力的键盘用户，所以它不会打扰我。但一些辅助技术更难通过多个制表位，例如 sip and puff device，因此减少制表位始终是一件好事，但 WCAG 并不要求这样做。
方法 3： 与 方法 2 类似，但替代文本更具描述性。您必须开始权衡替代文本（或空替代文本）中的简洁选项和（过于）描述性的选项。这是一个主观决定，通常需要进行一些可用性测试。
方法 4： 改进了 方法 2，只有一个制表位，但现在它会导致 两个 替代文本和 link 文本将被公布，因此 link 文本对于屏幕 reader 用户来说可能过于冗长。
我经常使用与您的 方法 4 接近的模式，但我不想让替代文本与 link 文本一起阅读，所以我使用 aria-labelledby. （当我要宣布的文本已经在屏幕上时，我使用 aria-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 的一些好处：
- 一个制表位
- link 屏幕 readers 的文字公告不太罗嗦
- 如果无法加载图像，将显示替代文本
- 屏幕 reader 用户仍然可以通过
<img>元素导航（G 键用于许多屏幕 readers）并听到描述
我相信您也可以在 方法 5 中找到漏洞。几乎所有解决方案都会有缺点。
更新 我花了很长时间才输入答案，以至于您在 OP 中添加了第三个问题。图像是否具有装饰性，无论是在产品列表页面 (PLP) 还是产品详细信息页面 (PDP) 中，仍然有些主观。作为最佳实践（WCAG 不要求），人们会认为 PDP 会包含更多关于产品的 详细信息 ，因此可能需要在图像上添加非常详细的描述性文字。但这些细节也可能存在于产品文本中，因此实际图像上不需要。