圖片

方便存取的圖片一開始可能只是個簡單的主題，也就是您 一些「替代文字」加入圖片後就大功告成了但主題其實更複雜 本節將探討以下主題：

• 如何更新程式碼以便存取圖片。
• 哪些資訊要與使用者分享，以及要在何處分享。
• 透過其他方式改善圖片，進一步幫助身心障礙者。

圖片用途和脈絡

因此在編寫一行程式碼之前，您必須先考慮 以及該圖片的使用方式請思考下列問題： 該圖片的用意和上下文，能幫助您決定 提供給使用的資訊 輔助技術 (AT) 例如螢幕閱讀器

請思考以下問題：

• 圖片對於瞭解功能或網頁的情境是否至關重要？
• 圖片試圖傳達的資訊類型為何？
• 圖片是簡單還是複雜？
• 圖片會引起情緒反應，還是促使使用者採取行動？
• 或者圖片只是視覺的「眼部糖」無法達到什麼目的？

視覺化流程圖，例如 圖片決策樹 可協助你判斷圖片屬於哪個類別

請嘗試使用瀏覽器擴充功能或網頁應用程式隱藏圖片，或是 然後問問自己：「我理解完後的內容嗎？」 如果答案為「是」，則最有可能是裝飾性圖片。如果不是，映像檔 但能以某種方式或符合內容必要的方式提供實用資訊當您 就可以判斷圖片的用途 就能判斷最準確的編碼方式 。

裝飾性圖片

裝飾性圖片是指 視覺元素不會加上額外的背景資訊 幫助使用者進一步瞭解情境裝飾圖片為補充圖片 且可能提供風格而非物質

如果您決定使用裝飾性的圖片，就必須透過程式輔助方式隱藏圖片 從 AT 開始當您設定隱藏圖片時，它會指示 AT ，不必使用圖片來瞭解網頁內容、背景資訊或動作。有 隱藏圖片的方法很多，包括使用空白/空值文字替代選項， 套用 ARIA 將圖片新增為 CSS 背景。以下列舉幾個範例 使用者提供的精美圖片

空白或空值 alt

空白/空值的替代文字屬性與缺少的替代文字不同 文字屬性。如果缺少替代文字屬性，AT 可能會讀取 找出檔案名稱或周圍內容，為使用者提供更多資訊 有關該圖片的資訊

角色已設為「presentation」或「none」

角色已設為 presentation 或 none 移除元素的語意從無障礙功能的曝光範圍 。同時，aria-hidden= "true" 會將整個元素 (及其所有子元素) 從 Accessibility 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 繼續正常運作但如果你有資訊充足的圖片，role="img" 則必須先新增至模式，AT 才會辨識為圖片。

第二，<svg> 元素不使用 alt 屬性，因此 不同的程式設計方法 ，在資訊豐富的圖片中加入替代說明。

  <svg role="img"...>
     <title>Cartoon drawing of a red, black, and gray ladybug.</title>
  </svg>

功能圖片

功能性圖片是 動作連結並舉例中的標誌 首頁、做為搜尋按鈕的放大鏡，或是社群媒體 圖示，可將您導向其他網站或應用程式。

如同資訊豐富的圖片，功能圖片必須包含替代文案 說明所有使用者的目的。有別於資訊豐富的圖片 每張功能性圖片都必須描述圖片的動作，而非 視覺元素

在這個標誌示例中，圖片不但資訊豐富而且可做為行動依據，因為 傳達資訊，以及做為連結行為的圖片。在這些情況下 您可以為每個元素加上替代說明 才能正常運作

如要為圖片加上替代說明，其中一種方法是透過隱藏視覺元素 文字。使用這個方法時，螢幕閱讀器會讀出文字，因為 這個 Pod 位於 DOM 中，但藉助自訂 CSS 讓它在視覺上隱藏起來。

您可以從「前往首頁」的程式碼片段中查看是 標題，而圖片替代文字為 "Lovely Ladybugs for your 草坪。」使用螢幕閱讀器聆聽標誌程式碼時，您會聽到 透過單一圖片傳達的影像和動作

<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> 元素。您可以透過程式輔助，將圖片連結至包含 較長的說明這個方法會在圖片之間建立緊密關聯 以及完整說明詳細說明可以顯示在 或視覺上的隱藏內容，但建議你持續顯示這些內容，以支持 也就是更多人。

如果要將長度較長的替代說明分組，另一種方法是使用 HTML5 <figure> 和 <figcaption> 元素。這些元素的運作方式與 aria-describedby 類似，因為其語意會為元素分組，讓圖片和說明建立更緊密的關係。新增 ARIA role="group"，可確保回溯相容於不支援 <figure> 元素原生語意的舊版網路瀏覽器。

替代文字最佳做法

當然，加入替代文字是不夠的。這段文字也應該 或說正事例如，如果您的圖片是關於大屠殺的幻覺 當中包含「錯誤」字樣會 如何傳達圖片的完整訊息和用意？當然不是。

替代說明必須盡可能擷取關聯性最高的視覺資訊 簡潔扼要雖然 螢幕閱讀器可讀取；一般情況下，建議將替代文字大寫 150 個半形字元以下，以免讀者感到疲乏。如果您需要 模型的背景資訊，可以使用其中一個複雜的圖片模式，將 說明文字，或進一步說明主要文案中的圖片。

某些額外替代文字的效果最好 做法包括：

• 避免使用「圖片」等字詞或「以下地點的相片」說明中， 螢幕閱讀器可為您辨識這些檔案類型。
• 為圖片命名時，請盡可能保持一致且正確。圖片 當缺少或忽略替代文字時，可將名稱視為備用文字。
• 避免使用非 Alpha 字母字元 (例如 #、9 和 &)，並使用破折號 請在圖片名稱或替代文字中加上底線，而不要使用底線。
• 請盡可能使用適當的標點符號。如果沒有這項權限，系統會提供圖片說明 聽起來就像一段很長、永不結束的連續句子
• 寫出像真人而非機器人的替代文字。濫填關鍵字的作用 是否對任何人受益；螢幕閱讀器使用者會感到不悅，搜尋引擎演算法也會造成負面影響。

隨堂測驗

測試您對 ARIA 和 HTML 的瞭解程度