可訪問的 SVG：屏幕閱讀器用戶的完美模式

已發表: 2022-03-10
快速總結 ↬在比較操作系統、瀏覽器和屏幕閱讀器的不同組合時，發現我們應該避免哪些 SVG 模式以及哪些模式最具包容性。 Carie 還將圍繞前端可訪問性舉辦有關可訪問前端模式的在線研討會。

雖然可縮放矢量圖形 (SVG) 在 90 年代後期首次推出，但由於在帶寬和性能比以往任何時候都更重要的世界中，它們具有極高的靈活性、高保真度和相對輕巧，因此在過去十年中再次流行起來. JavaScript 的進步和 CSS 媒體查詢（如 @prefers-color-scheme 和 @prefers-reduced-motion）的引入已經擴展了 SVG 的功能，超出了它們最初在網站上簡單顯示矢量圖的用例。

隨著 SVG 技術的進步，我們對如何設計和開發 SVG 的理解也需要提高。 該進步的一部分包括考慮此類設計和代碼對實際人類（也就是我們的最終用戶）的影響。

本文概述了“在野外”發現的12 種不同的 SVG 模式，以及當操作系統、瀏覽器和屏幕閱讀器的不同組合訪問時宣布的每種替代描述。

當然，以下示例並不是要詳盡列出數字領域中使用的所有可能模式，但它們確實突出了您可能遇到的一些更流行或普遍存在的 SVG 模式。 繼續閱讀以了解您應該避免哪些 SVG 模式以及哪些模式最具包容性！

使用<img>標籤的基本替代描述

第一組四個模式使用鏈接到 SVG 文件的<img>標記。 對於您的網站、應用程序或其他數字產品上的基本、簡單的圖像，這是一個不錯的選擇。 雖然使用此模式的缺點是您無法將許多視覺元素或動畫作為內聯 SVG 輕鬆控制，但此模式應該整體上呈現更輕、更快的圖像，並允許對在多個位置使用的 SVG 進行更輕鬆的維護。

模式 #1： <img> + alt="[words]"

codepen 示例中顯示的狐狸插圖
 <img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

模式 #2： <img> + role="img" + alt="[words]"

codepen 示例中顯示的狐狸插圖
 <img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

模式#3： <img> + role="img" + aria-label="[words]"

codepen 示例中顯示的狐狸插圖
 <img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

模式 #4： <img> + role="img" + aria-labelledby="[ID]"

codepen 示例中顯示的狐狸插圖
 <p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

使用<svg>標籤的基本替代描述

第二組四個模式使用帶有內聯 SVG 文件的<svg>標記。 儘管將 SVG 代碼直接添加到標記中可能會使頁面加載速度變慢，但通過對圖像的視覺元素或動畫進行更多控制，可以抵消這種輕微的低效率。 通過將 SVG 直接添加到 HTML，在向屏幕閱讀器用戶提供圖像信息時，您還有更多選擇。

模式#5： <svg> + role="img" + <title>

codepen 示例中顯示的狐狸插圖
 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

模式#6： <svg> + role="img" + <text>

codepen 示例中顯示的狐狸插圖
 <svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg>

模式 #7： <svg> + role="img" + <title> + aria-describedby="[ID]"

codepen 示例中顯示的狐狸插圖
 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

模式#8： <svg> + role="img" + <title> + aria-labelledby="[ID]"

codepen 示例中顯示的狐狸插圖
 <svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg>
跳躍後更多！ 繼續往下看↓

使用<svg>標記的擴展替代描述

最後一組四個模式使用帶有內聯 SVG 文件的<svg>標記，與第二組非常相似。 但是，在這種情況下，由於圖像的複雜性，我們正在使用附加信息擴展簡單的替代描述。

對於需要更多解釋的更複雜的圖像，這將是一個很好的模式選擇。 但是，重要的是要記住，有些殘疾人（例如認知障礙）可能會受益於在屏幕上隨時提供這些額外的圖像信息，而不是隱藏在 SVG 代碼中。

根據您需要添加到 SVG 的信息的類型和數量，您可能會考慮完全採用不同的方法。

模式#9： <svg> + role="img" + <title> + <text>

codepen 示例中顯示的狐狸插圖
 <svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg>

模式 #10： <svg> + role="img" + <title> + <desc>

codepen 示例中顯示的狐狸插圖
 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

模式 #11： <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

codepen 示例中顯示的狐狸插圖
 <svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

模式 #12： <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

codepen 示例中顯示的狐狸插圖
 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

請參閱 Carie Fisher 的完整 CodePen [可訪問 SVG 模式比較（Fox 版）]（https://codepen.io/smashingmag/pen/dyvvbKj）。

請參閱 Carie Fisher 撰寫的完整 CodePen 可訪問 SVG 模式比較（Fox 版本）。

SVG 模式的贏家和輸家

通過在不同的操作系統和瀏覽器組合上運行各種屏幕閱讀器，我們看到最終結果表中出現了明確的模式。 有一些明確的 SVG 模式的贏家和輸家，加上中間某個地方的一些模式，只要您知道並且可以接受它們的限制，您就可以實施它們。 查看結果表，我們可以得出以下結論：

使用<img>標籤的基本替代描述（第 1 組）

最佳展示

  • 模式 2 ： <img> + role="img" + alt="[words]"
  • 模式 3 ： <img> + role="img" + aria-label="[words]"

謹慎使用

  • 模式 4 ： <img> + role="img" + aria-labelledby="[ID]"

不建議

  • 模式 1 ： <img> + alt="[words]"

使用<svg>標籤的基本替代描述（第 2 組）

最佳展示

  • 模式 5 ： <svg> + role="img" + <title>
  • 模式 8 ： <svg> + role="img" + <title> + aria-labelledby="[ID]"

謹慎使用

  • 模式 7 ： <svg> + role="img" + <title> + aria-describedby="[ID]"

不建議

  • 模式 6 ： <svg> + role="img" + <text>

使用<svg>標籤的擴展替代描述（第 3 組）

最佳展示

  • 模式 11 ： <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

注意：雖然這種模式並不完美，因為它重複了替代描述，但它並沒有忽略測試中的任何元素，這與“謹慎使用”模式不同。

謹慎使用

  • 模式 9 ： <svg> + role="img" + <title> + <text>
  • 模式 10 ： <svg> + role="img" + <title> + <desc>
  • 模式 12 ： <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

不建議

  • 該組中的所有模式都沒有完全通過測試。

測試結果

請參閱 Carie Fisher 的 Pen [測試結果](https://codepen.io/smashingmag/pen/YzZQBwG)。

請參閱 Carie Fisher 的筆測試結果。

包起來

重要的是要注意，解釋 SVG 模式測試結果的一部分是理解每個屏幕閱讀器的創建者都有一個他們完全支持的推薦瀏覽器。 這並不意味著您不應該或不能在其他瀏覽器上使用屏幕閱讀器，這只是意味著如果您這樣做，結果可能不像您使用推薦的那樣準確。

本文的模式測試確實包括一些可能屬於“邊緣”類別的瀏覽器和屏幕閱讀器的組合，但也有關於建議您自己測試的操作系統、瀏覽器和屏幕閱讀器的組合的註釋。 這些測試的結果應該可以幫助您根據您的模式需求和約束做出最佳的 SVG 模式決策。

提醒您，在確定模式之前，請確保您了解如何以及何時創建可訪問圖像的基礎知識，並且您完全了解不同圖像類型所需的替代信息。

如果您在決定將哪種模式用於您的環境時需要更多幫助，請查看文章 Good, Better, Best: Untangling The Complex World Of Accessible Patterns，以幫助您在可訪問模式的棘手水域中導航。 有了所有這些信息和一點點努力，您的 SVG 就正在朝著對所有人更具包容性的方向發展。

編者註：您可以在 Carie 即將舉行的關於可訪問前端模式的在線研討會中學習有關可訪問性的最佳實踐——包括指南、測試工具、輔助技術和包容性設計模式。 在線，直播。