無障礙功能圖片乍看之下似乎是一個簡單的主題，在圖片中加入一些「替代文字」，就大功告成了。但主題比某些人想法更複雜本節將探討下列主題：
- 如何更新程式碼，讓圖片更易於存取。
- 您應與使用者分享哪些資訊，以及要在哪裡分享這些資訊。
- 透過其他方式改善圖片，藉此支援身心障礙者。
圖片目的和背景資訊
在編寫一行程式碼之前，您必須先思考圖片的點及使用方式。問自己有關圖片用途和情境的問題，可協助您判斷如何以最佳方式使用螢幕閱讀器的輔助技術 (AT) 將資訊傳遞給使用者。
請思考下列問題：
- 圖片是否至關重要，有助於瞭解相關功能或網頁的背景？
- 圖片想傳達什麼類型的資訊？
- 圖片是否簡單明瞭？
- 圖片是否會引起情緒或促使使用者採取行動？
- 還是只有視覺「眼睛糖」且沒有實際用途的圖片？
視覺化的流程圖 (例如圖片決策樹狀圖) 可協助您決定圖片所屬的類別。
請嘗試使用瀏覽器擴充功能或其他方法，隱藏網站或應用程式中的圖片。然後問問自己：「我知道還會看到哪些內容嗎？」 如果答案為是，這最有可能是裝飾性圖片。如果不符合，圖片將會以某種方式提供資訊，並遵守上下文。決定圖片的用途後，就可以決定最準確的程式碼編寫方式。
裝飾性圖片
「裝飾性圖片」是一種視覺元素，不會加入額外背景資訊或資訊，讓使用者能進一步瞭解背景資訊。裝飾性圖片為補充資訊，可以提供樣式而非物質。
如果您決定使用裝飾的圖片，則必須透過程式輔助方式在 AT 中隱藏圖片。您編寫要隱藏的圖片時，該圖片會向 AT 表示，圖片不需要該圖片，就能瞭解網頁內容、情境或動作。您可以透過許多方式隱藏圖片，包括使用空白/空值文字替代選項、套用 ARIA，或將圖片新增為 CSS 背景。以下幾個範例說明如何對使用者隱藏裝飾性圖片。
空白或空值 alt
空白/空值替代文字屬性與缺少替代文字屬性不同。如果缺少替代文字屬性，AT 可能會讀出檔案名稱或周圍內容，為使用者提供更多有關圖片的資訊。
角色已設為「presentation」或「none」
設為 presentation 或 none 的角色會移除元素的語意，避免其出現在無障礙樹狀結構。同時，aria-hidden= "true" 會從無障礙 API 中移除整個元素及其所有子項。
<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
請謹慎使用 aria-hidden，因為可能會隱藏不想隱藏的元素。
CSS 中的圖片
當您使用 CSS 新增背景圖片時，螢幕閱讀器不會偵測圖片檔。請先確定要將圖片設為隱藏，再套用這個方法。
資訊性圖片
資訊性圖片是指傳達簡單概念、構想或情緒的圖片。類型資訊的圖片包括現實世界中的物體相片、重要圖示、簡易繪圖和文字圖片。
如果您的圖片提供資訊，建議您加入程式輔助替代文字，說明圖片的用途。替代圖片說明 (通常簡稱為「替代文字」) 可讓 AT 使用者進一步瞭解圖片的背景資訊，並協助他們進一步瞭解圖片要傳達的訊息或意圖。
使用 <img> 元素提供簡單的替代說明，方法是加入 alt 屬性 (無論其指向的檔案類型為何，例如 .jpg、.png、.svg 等等)。
<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
不過，在內嵌使用 <svg> 元素時，需要注意無障礙功能。
首先，由於 SVG 的語意經過語意編碼，AT 預設為略過。如果有裝飾圖片，則不用擔心，AT 會依照預期方式忽略圖片。但如果您有資訊豐富的圖片，就必須將 ARIA role="img" 新增至 AT 模式，這樣 AT 才能識別為圖片。
其次，<svg> 元素不會使用 alt 屬性，因此必須改用不同的程式設計方法，為資訊圖像加上額外說明。
<svg role="img"...>
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
功能性圖片
功能圖片會連結至動作。舉例來說，功能性圖片包括連結至首頁的標誌、當做搜尋按鈕使用的放大鏡，或是導向其他網站或應用程式的社群媒體圖示。
就像資訊性圖片一樣，功能性圖片也必須包含對所有使用者的替代說明，藉此告知其用途。與資訊豐富的圖片不同，每張功能性圖片都必須描述圖片的動作，而非視覺元素。
在標誌範例中，圖片具有豐富資訊，而且可以做為行動參考，因為圖片的內容是用來傳達資訊，並以連結的形式運作。在這種情況下，您可以為每個元素新增替代說明，但這並非必要條件。
如要為圖片新增替代說明，其中一種方法是視覺隱藏文字。使用這個方法時，螢幕閱讀器會讀取文字，因為文字位於 DOM 中，但在自訂 CSS 的協助下會隱藏起來。
您可從程式碼片段「前往首頁」看到包裝函式標題，圖片替代文字則是「Lawn 的 Lovely Ladybugs」。使用螢幕閱讀器聆聽標誌程式碼時，您會同時聽到單張圖片反映的影像和動作。
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
</a>
</div>
複雜的圖片
「複雜映像檔」通常比裝飾、資訊或功能圖片需要更多說明。您必須提供簡短的替代說明，才能傳達完整訊息。複雜的圖片包括資訊圖表、地圖、圖表/圖表，以及複雜的插圖。和其他圖片類型一樣，您也可以透過其他方法為複雜圖片添加替代說明。
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug."><a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
如要在映像檔中加入額外說明，其中一種方法是連結至資源，或在該頁面稍後提供詳細說明的連結。這個方法不僅是 AT 使用者，還有協助身心障礙者 (例如認知、學習和閱讀障礙者) 的好選擇，因為他們可以輕鬆在畫面上查看這些額外圖片資訊，不必埋藏在程式碼當中。
另一種做法是將 aria-describedby 屬性附加至 <img> 元素。您可以透過程式輔助方式，將圖片連結至包含較長說明的 ID。這個方法會在圖片與完整說明之間建立緊密關聯。延伸說明可以顯示在畫面上，或是將說明隱藏起來，但建議您持續顯示這些說明，以便支援更多使用者。
如要將簡短說明的替代說明分為長短，另一種方法是使用 HTML5 <figure> 和 <figcaption> 元素。這些元素的運作方式與 aria-describedby 類似，都能按照語意將元素分組，為圖片和說明建立更緊密的關聯。新增 ARIA role="group" 可確保與不支援 <figure> 元素原生語意的舊版網路瀏覽器回溯相容。
替代文字最佳做法
當然，加入替代文字是不夠的。文字也應該具有意義舉例來說，如果您的圖片主題是一隻羊駝苆菫，露出獎品紅葉的片段，但替代文字卻顯示「錯誤」，是否傳達了圖片的完整訊息和意圖？當然不是。
替代說明必須盡可能擷取相關的視覺資訊，盡可能簡潔明瞭。雖然螢幕閱讀器可閱讀的字元數沒有上限，但通常建議將替代文字長度限制在 150 個半形字元以內，以免讀者感到疲乏。如果您需要為圖片新增其他背景資訊，可以使用其中一個複雜的圖片模式、新增說明文字，或是進一步描述主要文案中的圖片。
其他的替代文字最佳做法包括：
- 請避免在說明中使用「圖片」或「相片」等字詞，因為螢幕閱讀器會為您辨識這種檔案類型。
- 命名圖片時，請盡可能提供一致且正確的圖片。如果在缺少或忽略替代文字時，圖片名稱會是備用選項。
- 避免使用非英數字元 (例如 #、9 和 )，並在字詞之間使用破折號，而不要在圖片名稱或替代文字中使用底線。
- 請盡可能使用適當的標點符號。如果沒有這個項目，圖片說明聽起來就會像一個連貫且不斷的句子。
- 按照真人 (而非機器人) 的風格撰寫替代文字。濫填關鍵字對任何人沒有好處，因為螢幕閱讀器使用者會不知所措，搜尋引擎演算法也會對你造成負面影響。
隨堂測驗
測驗您對 ARIA 和 HTML 的相關知識
如何讓複雜的圖片變得易於瀏覽？
aria-describedby 屬性新增至圖片。