標籤和文字替代項目

Rob Dodson

為了讓螢幕閱讀器向使用者顯示語音 UI，有意義的元素必須擁有適當的標籤或文字替代選項。標籤或文字替代元素為元素提供可存取的「名稱」，這是在無障礙樹狀結構中表達元素語意的重要屬性之一。

元素名稱與元素的角色結合後，就會為使用者提供背景資訊，讓他們瞭解自己正在與何種元素互動，以及該元素在網頁上的呈現方式。如果沒有名稱，螢幕閱讀器只會公布元素的角色。想像一下，在沒有額外背景資訊的情況下，嘗試瀏覽網頁和聽覺「按鈕」、「核取方塊」和「圖片」。因此，為提供優質無障礙體驗而加上標籤和文字替代內容至關重要。

檢查元素名稱

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

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

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

檢查是否有遺漏的名稱

視元素類型而定，為元素新增無障礙元素名稱的方式有很多種。下表列出最常需要存取的元素類型，並提供名稱與新增方式的說明連結。

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

為文件和框架加上標籤

每個網頁都應有 title 元素，用於簡要說明網頁內容。title 元素會為網頁提供易於存取的名稱。螢幕閱讀器進入頁面時，這是朗讀的第一段文字。

例如，下面的網頁標題是「Mary's Maple Bar Fast-Baking 食譜」：

<!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 元素，但螢幕閱讀器通常會在影格邊界停止，並公告該元素的角色 (「頁框」及由 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>

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

這項規則的常見例外是圖示按鈕。圖示按鈕可以使用圖片或圖示字型提供按鈕的文字內容。例如，「您看到的內容」(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>

只要核取方塊正確加上標籤，螢幕閱讀器就能回報該元素具備核取方塊的角色、處於已勾選狀態，且名為「接收促銷優惠嗎？」，如下方 VoiceOver 範例所示：

顯示「要接收促銷優惠嗎？」的 VoiceOver 文字輸出內容。

待辦事項：DevSite - 思考和檢查評量