為了讓螢幕閱讀器使用者能夠順利使用語音 UI, 元素必須有適當的標籤或文字替代。標籤或文字 您也可以為元素提供可存取的 name,這是其中一項主要屬性。 用於在無障礙樹狀結構中表示元素語意。
元素名稱與元素的角色結合時,會給予 藉此瞭解他們正在與哪種元素互動 以及網頁上呈現的方式如未輸入名稱,則 螢幕閱讀器只會宣告元素的角色。想像一下 並聽到「按鈕」「核取方塊」「圖片」因此無需額外設定 相關資訊這就是為什麼標籤和替代文字對良好品質至關重要 無障礙體驗
檢查元素的名稱
您可以使用 Chrome 的開發人員工具檢查元素的無障礙名稱:
- 在元素上按一下滑鼠右鍵,然後選擇「檢查」。開發人員工具便會開啟 元素面板。
- 在「元素」面板中,找出「無障礙功能」窗格。可能處於隱藏狀態
在
»
符號後方。 - 在「Computed Properties」下拉式選單中,找出「Name」屬性。
![](https://web.developers.google.cn/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu.png?authuser=19&hl=zh-tw)
無論您觀看的是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
文字有點像藝術,但還是有些規範
可以追蹤:
- 判斷圖片是否提供其他難以辨識的內容 可讀取周圍文字
- 如果有,請盡可能將內容清楚傳達。
如果圖片做為裝飾,且未提供任何實用內容,
但可以提供空白的 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>
這項規則的常見例外狀況是圖示按鈕。圖示按鈕可以使用 圖片或圖示字型,用來提供按鈕的文字內容。例如: 「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」字樣。](https://web.developers.google.cn/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74.jpg?authuser=19&hl=zh-tw)
標籤表單元素
有兩種方法可以為標籤與表單元素 (例如核取方塊) 建立關聯。 這兩種方法都會造成標籤文字也成為 核取方塊,對於滑鼠或觸控螢幕的使用者來說,這個核取方塊也非常實用。建立關聯 含有元素的標籤,您可以:
- 將輸入元素放入標籤元素中
<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 文字輸出內容顯示「要收到促銷優惠嗎?」](https://web.developers.google.cn/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326.png?authuser=19&hl=zh-tw)
TODO: DevSite - 思考與檢驗評估