標籤和文字替代項目

如要讓螢幕閱讀器向使用者呈現語音 UI,有意義的元素必須有適當的標籤或文字替代項目。標籤或文字替代項目會為元素提供可存取的名稱,這是在無障礙樹狀結構中表達元素語義的其中一個重要屬性。

當元素名稱與元素的角色結合時,系統會提供使用者情境,讓他們瞭解自己正在與哪種類型的元素互動,以及該元素在頁面上的呈現方式。如果沒有名稱,螢幕閱讀器只會朗讀元素的角色。試著想像,當你嘗試瀏覽網頁時,聽到「按鈕」、「核取方塊」、「圖片」等詞彙,但沒有任何其他背景資訊。因此,標示和文字替代方案對於提供良好無障礙體驗至關重要。

您可以輕鬆使用 Chrome 的開發人員工具,檢查元素的可存取名稱:

  1. 對元素按一下滑鼠右鍵,然後選擇「檢查」。這會開啟「DevTools Elements」(開發人員工具元素) 面板。
  2. 在「元素」面板中,找出「無障礙」窗格。可能隱藏在 » 符號後方。
  3. 在「計算屬性」下拉式選單中,找出「名稱」屬性。
開發人員工具無障礙面板顯示按鈕的運算名稱。

無論您查看的是含有 alt 文字的 img,還是含有 labelinput,所有這些情況都會產生相同的結果:為元素提供可存取的名稱。

檢查是否有缺少的名稱

視元素類型而定,您可以透過不同方式為元素新增無障礙名稱。下表列出最常見的元素類型,這些元素需要可存取的名稱,並提供連結,說明如何新增這些元素。

元素類型 如何新增名稱
HTML 文件 標示文件和影格
<frame><iframe> 元素 標示文件和影格
圖片元素 為圖片和物件加入文字替代文字
<input type="image"> 元素 為圖片和物件加入文字替代文字
<object> 元素 為圖片和物件加入文字替代文字
按鈕 標示按鈕和連結
連結 標示按鈕和連結
表單元素 標籤表單元素

為文件和影格加上標籤

每個網頁都應包含 title 元素,簡要說明網頁內容。title 元素會為頁面提供無障礙元素名稱。螢幕閱讀器進入網頁時,這是系統會朗讀的第一個文字。

例如,下方網頁的標題為「Mary's Maple Bar Fast-Baking Recipe」(瑪莉的楓糖棒快速烘焙食譜):

<!doctype html>
  <html lang="en">
    <head>
      <title>Mary's Maple Bar Fast-Baking Recipe</title>
    </head>
  <body>
      </body>
</html>

同樣地,任何 frameiframe 元素都應具有 title 屬性:

<iframe title="An interactive map of San Francisco" src="…"></iframe>

雖然 iframe 的內容可能會包含自己的內部 title 元素,但螢幕閱讀器通常會在框架邊界停下,並朗讀元素的角色 (「frame」) 和 title 屬性提供的輔助名稱。這樣一來,使用者就能決定是否要進入或略過影格。

為圖片和物件加入文字替代項目

img 一律應搭配 alt 屬性,為圖片提供可存取的名稱。如果圖片無法載入,系統會使用 alt 文字做為預留位置,讓使用者瞭解圖片試圖傳達的內容。

撰寫優質的 alt 文字有點像是藝術,但您可以遵循以下幾項指南:

  1. 判斷圖片是否提供內容,否則很難從周圍文字中獲得。
  2. 如是,請盡可能簡潔地傳達內容。

如果圖片是裝飾性質,且不提供任何實用內容,您可以為圖片提供空白的 alt="" 屬性,將圖片從無障礙樹狀結構中移除。

在連結中包裝的圖片應使用 imgalt 屬性,說明使用者點選連結後會前往哪個位置:

<a href="https://en.wikipedia.org/wiki/Google">
  <img alt="Google's wikipedia page" src="google-logo.jpg">
</a>

同樣地,如果 <input type="image"> 元素用於建立圖片按鈕,則應包含 alt 文字,說明使用者按下按鈕時會發生的動作:

<form>
  <label>
    Username:
    <input type="text">
  </label>
  <input type="image" alt="Sign in" src="./sign-in-button.png">
</form>

嵌入物件

<object> 元素通常用於嵌入 Flash、PDF 或 ActiveX 等內容,因此也應包含替代文字。與圖片類似,如果元素無法算繪,系統就會顯示這段文字。替代文字會以一般文字的形式放入 object 元素中,例如下方的「Annual report」:

<object type="application/pdf" data="/report.pdf">
Annual report.
</object>

按鈕和連結通常是網站體驗的重要元素,因此務必為這兩者提供方便存取的名稱。

按鈕

button 元素一律會嘗試使用文字內容來計算其無障礙名稱。如果按鈕不是 form 的一部分,只要撰寫清楚的動作做為文字內容,即可建立方便存取的名稱。

<button>Book Room</button>

行動版表單,其中含有「預訂房間」按鈕。

圖示按鈕是這項規則的常見例外狀況。圖示按鈕可能會使用圖片或圖示字型,為按鈕提供文字內容。舉例來說,WYSIWYG 編輯器中用於設定文字格式的按鈕通常只是圖形符號:

左對齊圖示按鈕。

使用圖示按鈕時,建議您使用 aria-label 屬性為按鈕提供明確的無障礙名稱。aria-label 會覆寫按鈕內的任何文字內容,讓您向使用螢幕閱讀器的使用者清楚說明動作。

<button aria-label="Left align"></button>

與按鈕類似,連結的可存取名稱主要取自文字內容。建立連結時,不妨在連結中加入最有意義的文字,而非「這裡」或「閱讀更多」等填充字詞。

描述不夠詳盡
Check out our guide to web performance <a href="/guide">here</a>.
實用內容!
Check out <a href="/guide">our guide to web performance</a>.

這項功能特別適合螢幕閱讀器,因為螢幕閱讀器提供快捷鍵,可列出網頁上的所有連結。如果連結充斥重複的填充文字,這些捷徑就會變得毫無用處:

VoiceOver 的連結選單中填入「here」一詞。
VoiceOver 是 macOS 專用的螢幕閱讀器,此處顯示「按連結導覽」選單。

標籤表單元素

您可以透過兩種方式將標籤與表單元素 (例如核取方塊) 建立關聯。無論使用哪一種方法,標籤文字都會成為核取方塊的點擊目標,這對滑鼠或觸控螢幕使用者也很有幫助。如要將標籤與元素建立關聯,請執行下列任一操作:

  • 將輸入元素放在標籤元素內
<label>
  <input type="checkbox">Receive promotional offers?</input>
</label>
  • 或者,您可以使用標籤的 for 屬性,並參照元素的 id
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

當核取方塊已正確標示,螢幕閱讀器就能回報元素的角色為核取方塊、處於勾選狀態,且名稱為「Receive promotional offers?」(接收促銷優惠?),如以下 VoiceOver 範例所示:

VoiceOver 文字輸出內容顯示「Receive promotional offers?」(接收促銷優惠?)

TODO:DevSite - 思考與檢查評估