表單是可讓使用者在欄位或一組欄位中提供資料的元素。表單可以簡單到只有一個欄位,也可以複雜到包含多個欄位、輸入驗證,甚至是人機驗證的多步驟表單元素。
從無障礙的角度來看,表單是其中一個最難處理的元素,因為您必須瞭解我們已介紹的所有元素,以及表單專屬的其他規則。只要花點時間瞭解相關資訊,就能建立符合您和使用者需求的無障礙表單。
本課程的最後一個元件專屬單元是表單。本單元將著重於表單專屬指南,但您在先前單元中學到的所有其他指南,例如內容結構、鍵盤焦點和色彩對比,也適用於表單元素。
欄位
表單的骨幹就是欄位。欄位是小型互動式模式,例如輸入或圓形按鈕元素,可讓使用者輸入內容或做出選擇。您可以選擇多種表單欄位。
建議您使用已建立的 HTML 模式,而非使用 ARIA 建構自訂內容,因為某些功能和函式 (例如欄位狀態、屬性和值) 已內建於 HTML 元素中。您必須手動新增 ARIA 至自訂欄位。
不建議:使用 ARIA 的自訂 HTML
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
建議:標準 HTML
<form id="sundae-order-form">
<!-- form content -->
</form>
除了選擇最容易存取的表單欄位模式,您也應視情況在欄位中加入 HTML 自動完成屬性。新增自動完成屬性可讓使用者代理程式和輔助技術 (AT) 更精細地定義或識別用途。
自動完成屬性可讓使用者自訂視覺呈現方式,例如在已指派生日自動完成屬性 (bday
) 的欄位中顯示生日蛋糕圖示。一般來說,自動完成屬性可讓使用者更輕鬆快速地填寫表單。這項功能對於有認知和閱讀障礙的使用者,以及使用螢幕閱讀器等輔助科技的使用者而言特別實用。
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
最後,除非使用者在使用元件前已收到行為警告,否則表單欄位在收到焦點或使用者輸入內容時,不應產生內容變更。舉例來說,當欄位獲得焦點或使用者在欄位中加入內容時,表單不應自動提交。
標籤
標籤可讓使用者瞭解欄位的用途 (如果該欄位為必填欄位),也可以提供欄位相關規定的資訊,例如輸入格式。標籤必須隨時顯示,並向使用者準確描述表單欄位。
無障礙表單的其中一個基本原則,就是在欄位與標籤之間建立明確且準確的連結。無論是視覺上還是程式輔助,都是如此。沒有這個背景資訊,使用者可能無法瞭解如何填寫表單中的欄位。
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
此外,相關的表單欄位 (例如郵寄地址) 需要以程式輔助方式和視覺方式進行分組。其中一種方法是使用 fieldset 和 legend 模式,將類似的元素分組。
說明
欄位說明與標籤的用途相似,都是用來提供更多欄位和相關規定的背景資訊。如果標籤或表單操作說明已提供足夠的說明,就不需要提供欄位說明。
不過,在某些情況下,新增額外資訊有助於避免表單錯誤,例如傳遞密碼欄位輸入內容的最小長度資訊,或是告知使用者要使用的日曆格式 (例如 MM-DD-YYYY)。
您可以透過多種方法,在表單中加入欄位說明。除了 <label>
元素外,最佳做法之一是將 aria-describedby 屬性新增至表單元素。螢幕閱讀器會朗讀說明和標籤。
如果您在元素中加入 aria-labelledby 屬性,屬性值會覆寫 <label>
中的文字。如常,請務必使用您打算支援的所有 AT 測試最終程式碼。
錯誤
建立無障礙表單時,您可以採取許多措施,避免使用者發生表單錯誤。在本單元前面,我們介紹了如何清楚標示欄位、建立識別標籤,以及盡可能新增詳細說明。但無論您認為表單有多清楚,使用者最終還是會犯錯。
當使用者遇到表單錯誤時,第一步是讓使用者知道錯誤。必須清楚指出發生錯誤的欄位,並以文字向使用者說明錯誤本身。
顯示錯誤訊息的方法有很多種,例如:
- 在發生錯誤的附近,以內嵌方式顯示模式對話方塊
- 將多個錯誤訊息分組成一個大型訊息,並顯示在頁面頂端
在宣告錯誤時,請務必留意鍵盤焦點和 ARIA 即時區域選項。
盡可能為使用者提供詳細的錯誤修正建議。有兩個屬性可用於通知使用者錯誤。
- 您可以使用 HTML required 屬性。瀏覽器會根據欄位驗證參數提供一般錯誤訊息。
- 或者,您也可以使用 aria-required 屬性,將自訂錯誤訊息傳送給 AT。除非您新增額外的程式碼,讓所有使用者都能看到訊息,否則只有 AT 會收到訊息。
當使用者認為已解決所有錯誤後,請允許他們重新提交表單,並針對提交結果提供意見回饋。錯誤訊息會告知使用者需要進行更多更新,而成功訊息則會確認使用者已解決所有錯誤並成功提交表單。
其他成功標準
WCAG 2.2 引進了下列成功標準,著重於提供更無障礙的表單體驗:
進行隨堂測驗
測驗您對無障礙表單的瞭解
下列哪個表單輸入項最容易存取?
<label>Email address: <input type="email" required autocomplete="email"></label>
<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>
<label>Email address: <input type="email" required></label>
Email address: <input type="email" required>