可訪問性 標籤

為什麼

標籤對於盲人使用者、低視力使用者、行動不便使用者以及有記憶障礙的使用者都至關重要。缺少標籤將導致許多使用者無法訪問表單。

什麼

視覺標籤是位於表單控制元件附近的文字，用於描述哪些資訊屬於給定的表單欄位或一組欄位。每個標籤必須以程式設計方式與表單控制元件或控制元件組關聯。標籤不一定是 <label> 元素。

如何操作

你將學習如何使用 <label>、aria-label 和 <legend>。

The <label>

<label> 標籤定義了多個元素的標籤，例如 <input>、<select> 和 <textarea>。 

在這個 Vodafone 的示例中，我們有一個 <select> 和一個 <input type="email">，每個都帶有一個描述性的 <label>

<label for="customerType">今天你是為誰購買？</label>
<select name="customerType" id="customerType">

請注意上面示例中 <label> 元素的使用。

<label> 元素對螢幕閱讀器使用者很有用，因為當用戶將焦點放在輸入元素上時，螢幕閱讀器會朗讀標籤。

<label> 元素還有助於那些難以點選很小區域（如單選按鈕或複選框）的使用者——因為當用戶點選 <label> 元素內的文字時，它會切換單選按鈕或複選框。

<label> 標籤的 for 屬性應等於 <input> 元素的 id 屬性，以便將它們繫結在一起。

必填欄位

表單標籤通常包含“*”或“required”字樣，以指示該欄位是必填的。這兩種方法都可以。但是，如果你使用星號（*），建議將 required 和 aria-required="true" 新增到表單控制元件中。

<label for="email">你的電子郵件地址 *</label>
<input id="email" name="email" required aria-required="true" placeholder="Email" required="">  

The aria-label

沒有視覺標籤的欄位仍然需要標籤。如果無法使用 <label>，一種選擇是使用 aria-label。 

此搜尋欄位有佔位符，但沒有標籤。佔位符不是有效的可訪問名稱。你不能依賴它作為替代。一個簡單的解決方案是新增 aria-label="Enter search term"

<input placeholder="Enter search term" aria-label="Enter search term">

The <legend>

表單控制元件組，如複選框和單選按鈕，通常除了 <label> 之外，還需要更高級別的“標籤”。這個高級別的“標籤”是用 <fieldset> 和 <legend> 建立的。

此登錄檔單包含三個用於提供出生日期的表單控制元件。視覺上，讓日、月、年都與“你的出生日期”相關是合理的。對於螢幕閱讀器使用者來說，這種關聯並不明顯。我們不能在這裡使用 <label>。標籤是日、月、年。解決方案是新增一個 <fieldset> 和一個 <legend>

想製作高效的表單？瞭解 autocomplete。