標籤和文字替代項目

Rob Dodson

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

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

檢查元素名稱

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

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

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

檢查是否有缺少的名稱

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

元素類型 如何新增名稱
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>

同樣地，所有 frame 或 iframe 元素都應具備 title 屬性：

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

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

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

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

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

  1. 判斷圖片是否提供內容，否則很難從周圍文字中獲得。
  2. 如果有，請盡可能將內容清楚傳達。

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

在連結中包裝的圖片應使用 img 的 alt 屬性，說明使用者點選連結後會前往哪個位置：

<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 元素中，例如下方的「年度報告」：

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

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

按鈕

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

<button>Book Room</button>

含有「訂房」按鈕的行動版表單。

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

靠左對齊圖示按鈕。

使用圖示按鈕時，建議您使用 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 - 思考與檢查評估