如要讓螢幕閱讀器向使用者呈現語音 UI，有意義的元素必須有適當的標籤或文字替代項目。標籤或文字替代項目會為元素提供可存取的名稱，這是在無障礙樹狀結構中表達元素語義的其中一個重要屬性。
當元素名稱與元素的角色結合時，系統會提供使用者情境，讓他們瞭解自己正在與哪種類型的元素互動，以及該元素在頁面上的呈現方式。如未顯示名稱，螢幕閱讀器只會宣告元素的角色。想像一下，在沒有額外背景資訊的情況下，嘗試瀏覽頁面和聽覺、「按鈕」、「核取方塊」、「圖片」等行為。因此，標示和文字替代方案對於提供良好的無障礙體驗至關重要。
檢查元素名稱
您可以輕鬆使用 Chrome 的開發人員工具，檢查元素的可存取名稱：
- 在元素上按一下滑鼠右鍵，然後選擇「檢查」。這會開啟「DevTools Elements」(開發人員工具元素) 面板。
- 在「元素」面板中，找出「無障礙功能」窗格。可能隱藏在
»符號後方。 - 在「Computed Properties」下拉式選單中，找出「Name」屬性。
無論您查看的是含有 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 文字有點像是藝術，但您可以遵循以下幾項指南：
- 判斷圖片是否提供內容，否則很難從周圍文字中獲得。
- 如果是，請盡可能簡潔地傳達內容。
如果圖片是裝飾性質，且不提供任何實用內容，您可以為圖片提供空白 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>.
這項功能特別適合螢幕閱讀器，因為螢幕閱讀器提供快捷鍵，可列出網頁上的所有連結。如果連結中有許多重複的補白文字，下列快速鍵就比較不實用：
標籤表單元素
您可以透過兩種方式，將標籤與核取方塊等表單元素建立關聯。 這兩種方法都會造成標籤文字也成為核取方塊的點擊目標，這對滑鼠或觸控螢幕的使用者來說也非常實用。如要將標籤與元素建立關聯，請執行下列任一操作：
- 將輸入元素放在標籤元素內
<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 範例所示：
TODO：DevSite - 思考與檢查評估