標籤和文字替代項目

Rob Dodson

為了讓螢幕閱讀器使用者能夠順利使用語音 UI， 元素必須有適當的標籤或文字替代。標籤或文字 您也可以為元素提供可存取的 name，這是其中一項主要屬性。 用於在無障礙樹狀結構中表示元素語意。

元素名稱與元素的角色結合時，會給予 藉此瞭解他們正在與哪種元素互動 以及網頁上呈現的方式如未輸入名稱，則 螢幕閱讀器只會宣告元素的角色。想像一下 並聽到「按鈕」「核取方塊」「圖片」因此無需額外設定 相關資訊這就是為什麼標籤和替代文字對良好品質至關重要 無障礙體驗

檢查元素的名稱

您可以使用 Chrome 的開發人員工具檢查元素的無障礙名稱：

  1. 在元素上按一下滑鼠右鍵，然後選擇「檢查」。開發人員工具便會開啟 元素面板。
  2. 在「元素」面板中，找出「無障礙功能」窗格。可能處於隱藏狀態 在 » 符號後方。
  3. 在「Computed Properties」下拉式選單中，找出「Name」屬性。
，瞭解如何調查及移除這項存取權。
開發人員工具無障礙工具窗格，顯示按鈕的運算名稱。
，瞭解如何調查及移除這項存取權。

無論您觀看的是img文字alt文字，還是input label，以上所有情境都會產生相同的結果： 元素。

檢查是否有遺漏的名稱

您可以透過多種方式為元素新增無障礙名稱 根據類型下表列出最常見的元素類型 。

元素類型 如何新增名稱
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 元素， 螢幕閱讀器通常會於影格邊界停止，並朗讀元素的 role—「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>

附有「Book Room」的行動版表單按鈕。

這項規則的常見例外狀況是圖示按鈕。圖示按鈕可以使用 圖片或圖示字型，用來提供按鈕的文字內容。例如： 「How You See Is What You Get (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 文字輸出內容顯示「要收到促銷優惠嗎？」

TODO: DevSite - 思考與檢驗評估