標籤和文字替代項目

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 元素中，例如下方的「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 - 思考與檢查評估