表單是讓使用者在欄位或欄位群組中提供資料的元素。表單可以是單一欄位，也可以是複雜的多步驟表單，每個頁面有多個欄位、輸入驗證和人機驗證。
從無障礙的角度來看，表單是最難正確使用的元素之一，因為表單需要您瞭解我們已介紹的所有元素，以及專屬於表單的其他規則。只要花點時間瞭解，就能製作符合自己和使用者需求的無障礙表單。
表單是本課程中最後一個元件專屬單元。本單元著重於表單專屬的指南，但先前單元中的指南 (例如內容結構、鍵盤焦點和色彩對比) 也適用於表單元素。
欄位
表單的骨幹是欄位。欄位是小型互動模式，例如輸入或圓形按鈕元素，可讓使用者輸入內容或做出選擇。您可以從多種表單欄位中選擇。
預設建議是使用既有的 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)。
您可以使用多種方法，在表單中新增欄位說明。其中一個最佳方法是在表單元素中加入 aria-describedby 屬性，以及 <label> 元素。螢幕閱讀器會朗讀說明和標籤。
如果將 aria-labelledby 屬性加到元素中，屬性值會覆寫 <label> 內的文字。請務必使用您打算支援的所有 AT 測試最終程式碼。
錯誤
建立無障礙表單時，您可以採取許多措施，避免使用者發生表單錯誤。在本單元稍早，我們介紹了清楚標記欄位、建立識別標籤，以及盡可能新增詳細說明。但無論您認為表單有多清楚，使用者最終還是會出錯。
使用者遇到表單錯誤時，第一步是告知錯誤。必須清楚指出發生錯誤的欄位，並以文字向使用者說明錯誤本身。
顯示錯誤訊息的方法有很多種，例如：
- 在發生錯誤的位置附近顯示模式內嵌訊息
- 頁面頂端會顯示一則較大的訊息，其中包含多個錯誤
宣布錯誤時，請務必注意鍵盤焦點和 ARIA 即時區域選項。
請盡可能提供詳細建議，協助使用者修正錯誤。您可以使用兩種屬性通知使用者發生錯誤。
- 你可以使用 HTML required 屬性。瀏覽器會根據檔案驗證參數提供一般錯誤訊息。
- 或者，您可以使用 aria-required 屬性，向 AT 分享自訂錯誤訊息。只有 AT 會收到這則訊息，除非您新增程式碼，讓所有使用者都能看到這則訊息。
使用者認為所有錯誤都已解決後，請允許他們重新提交表單，並提供提交結果的意見回饋。錯誤訊息會告知使用者需要進行更多更新，而成功訊息則會確認使用者已解決所有錯誤，並成功提交表單。
其他成功標準
WCAG 2.2 導入了下列成功條件，著重於提供更易於存取的表單體驗：