無障礙圖片乍看之下似乎是個簡單的主題，只要為圖片加上一些「替代文字」即可。但這個主題比某些人想像的更細膩。本節將探討以下主題：
- 如何更新程式碼，讓圖片更容易存取。
- 應與使用者分享哪些資訊，以及分享資訊的位置。
- 其他改善圖片的方法，協助身心障礙者。
圖片用途和情境
在撰寫任何程式碼之前，請先思考點圖像的用途、位置和使用方式。思考這些問題有助於判斷如何以最佳方式向使用輔助技術 (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 新增背景圖片時，螢幕閱讀器無法偵測圖片檔案。請先確定要隱藏圖片，再套用這個方法。
資訊型圖片
資訊圖片：傳達概念、想法或情緒的圖片。資訊圖片包括實物相片、重要圖示、簡單繪圖和文字圖片。
如果圖片具有說明性質，請加入程式輔助替代文字，說明圖片用途。替代圖片說明 (通常簡稱為「替代文字」) 可為輔助技術使用者提供圖片的背景資訊，協助他們進一步瞭解圖片的訊息或意圖。
如要為 <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 預設會略過這些項目。
如果 SVG 是裝飾性圖片，這沒問題，AT 會按照預期忽略該圖片。但如果 SVG 是資訊性圖片，請在元素中加入 ARIA role="img"，讓 AT 將其辨識為圖片。
其次，<svg> 元素不會使用 alt 屬性，因此必須改用不同的編碼方法，為資訊性圖片新增替代說明。
<svg role="img">
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
功能圖片
功能圖片會連結至動作。功能性圖片的例子包括：連結至首頁的標誌、用做搜尋按鈕的放大鏡，或是將你導向其他網站或應用程式的社群媒體圖示。
與資訊性圖片一樣，功能性圖片也必須包含替代說明，向所有使用者說明其用途。與資訊圖片不同，每個功能圖片都需要描述圖片動作，而非視覺方面。
以標誌為例，圖片既能傳達資訊，也能做為連結，因此兼具資訊性和可操作性。在這種情況下，您可以為每個元素新增替代說明，但這並非必要。
如要為圖片新增替代說明，其中一種方法是透過視覺上隱藏的文字。使用這個方法時，文字會顯示在 DOM 中，因此螢幕閱讀器會朗讀文字，但自訂 CSS 會隱藏文字。
從程式碼片段中可以看到，「Navigate to the homepage」(前往首頁) 是包裝函式標題，圖片替代文字則是「Lovely Ladybugs for your Lawn」(草坪上可愛的瓢蟲)。使用螢幕閱讀器聆聽標誌代碼時，你會聽到一個圖像傳達的視覺和動作。
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</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。這個方法會在圖片和完整說明之間建立強烈關聯。擴充說明可以顯示在畫面上或隱藏，但建議保持顯示狀態，以便支援更多使用者。
如要將簡短替代說明與較長的說明分組，也可以使用 <figure> 和 <figcaption> 元素。這些元素的作用與 aria-describedby 類似，可從語意上將元素分組，在圖片和說明之間建立更強的關聯。
新增 ARIA role="group" 可確保回溯相容於舊版網頁瀏覽器，這些瀏覽器不支援 <figure> 元素的語意。
替代文字最佳做法
當然，光是加入替代文字還不夠，文字也應有意義。舉例來說，如果圖片內容是成群的瓢蟲啃食你珍貴的玫瑰花叢葉片，但替代文字卻是「蟲」，這樣能完整傳達圖片的訊息和意圖嗎？絕對不會。
替代說明應盡可能擷取相關視覺資訊，並簡潔扼要。螢幕閱讀器可朗讀的字元數量沒有限制，但通常建議將替代文字限制在 150 個字元以內，以免使用者感到疲勞。如要為圖片新增其他背景資訊，可以使用其中一種複雜圖片模式、新增說明文字，或在主要副本中進一步描述圖片。
其他替代文字最佳做法包括：
- 避免在說明中使用「圖片」或「相片」等字詞，因為螢幕閱讀器會為你識別這些檔案類型。
- 為圖片命名時，請盡可能保持一致和準確。如果替代文字遺失或遭到忽略，系統會改用圖片名稱。
- 請避免使用非英文字母的字元 (例如 #、9、&)，並在圖片名稱或替代文字中，以破折號分隔字詞，而非底線。
- 請盡可能使用正確的標點符號。如果沒有標點符號，圖片說明就會像永無止境的長句。
- 撰寫替代文字時，請像人類一樣思考，而非機器人。濫填關鍵字對誰都沒有好處，螢幕閱讀器使用者會感到困擾，搜尋引擎演算法也會對您處以罰則。