無障礙功能圖片乍看之下似乎是一個簡單的主題,在圖片中加入一些「替代文字」,就大功告成了。但主題比某些人想法更複雜本節將探討下列主題:
- 如何更新程式碼,讓圖片更易於存取。
- 您應與使用者分享哪些資訊,以及要在哪裡分享這些資訊。
- 透過其他方式改善圖片,藉此支援身心障礙者。
圖片目的和背景資訊
在編寫一行程式碼之前,您必須先思考圖片的點及使用方式。問自己有關圖片用途和情境的問題,可協助您判斷如何以最佳方式使用螢幕閱讀器的輔助技術 (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
屬性新增至圖片。