標籤和文字替代項目

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

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

檢查元素的名稱

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

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

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

檢查是否有遺漏的名稱

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

為文件和頁框加上標籤

每個網頁都應該要有 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 元素, 螢幕閱讀器通常會於影格邊界停止,並朗讀元素的 role—「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 元素設為一般文字,例如「年度報表」如下:

<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 - 思考與檢驗評估