無障礙 (a) 規則 - 3

圖片

這不僅僅是向圖像添加替代文字；遠不止這些。

裝飾圖像

• 如果圖像沒有添加額外的上下文或資訊（裝飾圖像）來讓使用者更好地理解上下文，那麼它應該對輔助技術 (AT) 隱藏，例如螢幕閱讀器。

• 使用以下任何一種方法來隱藏 AT 中的影像：

  • 空白文字替代 (alt)
  • 應用 ARIA
  • 新增圖片作為 CSS 背景

<!-- All of these choices lead to the same result. -->
<img  src="/static/imghwm/default1.png" data-src=".../Ladybug.jpg" class="lazy" role="presentation" alt="無障礙 (a) 規則 - 3" >
<img  src="/static/imghwm/default1.png" data-src=".../Ladybug.jpg" class="lazy" role="none" alt="無障礙 (a) 規則 - 3" >
<img  src="/static/imghwm/default1.png" data-src=".../Ladybug.jpg" class="lazy" aria-hidden="true" alt="無障礙 (a) 規則 - 3" >

• 如有疑問，請為影像新增描述。

空或 null alt

• 不要將圖像 alt 屬性設為“”，除非圖像純粹是裝飾性的。

Attribute	Example	Screen Reader Behavior	Use Case
alt="" (Empty)		Ignores the image completely	Decorative or non-informative images
Missing alt		May read the filename/URL	Not recommended; implies negligence

資訊豐富的影像

• 如果圖像傳達概念、想法或情感，您應該包含描述圖像用途的程式化替代文字。

• 盡可能添加非常詳細的影像描述。

例如

<img src="/static/imghwm/default1.png" data-src=".../Ladybug_Swarm.jpg" class="lazy" alt="A swarm of red ladybugs is resting 
on the leaves of my prize rose bush.">

• 如果影像是（內聯），請新增 role="img"。

• 由於元素不支援 alt 屬性，請使用替代編碼方法來提供描述。

Method	Use Case	Pros	Cons
	Short, brief descriptions	Simple, widely supported	Limited in length
aria-label	Brief descriptions	Quick, inline	Best for short text
aria-labelledby	Complex descriptions using	Comprehensive, flexible	More verbose
	Visible description in a figure context	Visible and accessible	Not ideal for all SVGs

功能影像

• 任何具有功能性目的的圖像（例如，連結到主頁的標誌、用作搜尋按鈕的放大鏡圖示）都應包含適當的替代文字。

• 替代文字應描述影像的操作，而不是其視覺方面。

• 如果圖像既提供資訊又具有可操作性，您可以為每個元素添加替代描述 - 但這不是必需的。例如
  

<!-- All of these choices lead to the same result. -->
<img  src="/static/imghwm/default1.png" data-src=".../Ladybug.jpg" class="lazy" role="presentation" alt="無障礙 (a) 規則 - 3" >
<img  src="/static/imghwm/default1.png" data-src=".../Ladybug.jpg" class="lazy" role="none" alt="無障礙 (a) 規則 - 3" >
<img  src="/static/imghwm/default1.png" data-src=".../Ladybug.jpg" class="lazy" aria-hidden="true" alt="無障礙 (a) 規則 - 3" >

複雜影像

• 如果圖像需要比裝飾性、資訊性或功能性圖像更多的解釋（包括資訊圖表、地圖、圖形/圖表和複雜插圖），請使用這些方法中的任何一種來添加替代描述

• 連結到資源或提供跳轉連結到頁面稍後的較長說明。例如
  

<img src="/static/imghwm/default1.png" data-src=".../Ladybug_Swarm.jpg" class="lazy" alt="A swarm of red ladybugs is resting 
on the leaves of my prize rose bush.">

• 將 aria-scribedby 屬性附加到 中然後，元素將圖像連結到包含較長描述的 ID。例如

<div title="Navigate to the homepage">
   <a href="/">
      <img src="/static/imghwm/default1.png" data-src=".../Ladybug_Logo.png" class="lazy" alt="Lovely Ladybugs for your Lawn">
   </a>
</div>

替代文字最佳實踐

• 建議將替代文字限制在 150 個字元或更少，以避免讀者疲勞。

• 避免在說明中使用 「影像」 或 「照片」 等詞語，因為螢幕閱讀器會辨識這些檔案類型。

• 命名影像時，盡可能保持一致和準確。當替代文字遺失或被忽略時，圖像名稱是後備。

• 避免使用非字母字元（例如 #、9、&）

• 在圖像名稱或替代文字中使用單字之間的破折號，而不是底線。

• 盡可能使用正確的標點符號。如果沒有它，圖像描述聽起來就像是一個漫長的、永無止境的連續句子。

• 像人類而不是機器人一樣寫替代文字。關鍵字堆砌對任何人都沒有好處——使用螢幕閱讀器的人會感到惱火，搜尋引擎演算法會懲罰他們。

以上是無障礙 (a) 規則 - 3的詳細內容。更多資訊請關注PHP中文網其他相關文章！