產品列表圖像替代文本可訪問性的最佳做法（和法律）是什么？

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>

相關指引

• 結合鏈接文本和相鄰圖像
• 將鏈接與其所屬的標題相關聯的技術（如果您將產品分成頁面上的部分