表單是一種元素，可讓使用者將資料提供給欄位或一組欄位。表單可以是簡單的單一欄位，也可以複雜程度如多步驟表單元素，每頁含有多個欄位、輸入驗證，有時也可進行人機驗證 (Captcha)。
從無障礙的角度來看，表單是最困難的元素之一，因為表單需要瞭解我們已涵蓋的所有元素，以及表單專屬的額外規則。投入一些時間上的瞭解和時間，您就可以根據自己和使用者的需求設計無障礙表單。
表單是本課程的最後一個單元特定單元。這個模組主要著重於特定表單指南，但您在先前模組中學到的所有其他指南 (例如內容結構、鍵盤焦點和顏色對比) 也適用於表單元素。
欄位
表單的骨幹是欄位。欄位是小型的互動模式，例如輸入或圓形按鈕元素，可讓使用者輸入內容或做出選擇。系統提供多種表單欄位可供選擇。
根據預設，建議使用已建立的 HTML 模式，而非使用 ARIA 建構自訂項目，因為某些特徵和功能 (例如欄位狀態、屬性和值) 本身就內建在 HTML 元素中，但是您必須手動新增自訂 ARIA。
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
除了選擇最易於存取的表單欄位模式 (如適用)，您也應在欄位中加入 HTML 自動完成屬性。新增自動完成屬性可讓使用者代理程式和輔助技術 (AT) 享有更精細的定義或識別用途。
自動完成屬性可讓使用者打造個人化的視覺呈現方式，例如在具有生日自動完成屬性 (bday) 的欄位中，顯示生日蛋糕圖示。一般而言，自動完成屬性可讓您更輕鬆快速地填寫表單。這對於認知及閱讀障礙和 AT 使用者 (例如螢幕閱讀器) 的使用者特別有幫助。
<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>
此外，相關表單欄位 (例如郵寄地址) 必須以程式輔助方式分組，並以視覺方式分組。其中一個方法是使用欄位集/圖例模式，將類似的元素分組。
說明
欄位說明與標籤類似，用途是為欄位和要求提供更多背景資訊。如果標籤或表單指示具有清楚易懂的標籤，則不需要欄位說明。
不過，在某些情況下加入額外資訊有助於避免表單錯誤，例如轉發密碼欄位的最短時間間隔資訊，或是告知使用者要使用的日曆格式 (例如 MM-DD-YYYY)。
您在表單中加入欄位說明的方法有很多種。最佳方法是在表單元素中加入 aria-describedby 屬性，以及 <label> 元素。螢幕閱讀器會朗讀說明和標籤。
如果您在元素中加入 aria-labelledby 屬性，該屬性值會覆寫 <label> 內的文字。一如既往，請您務必使用您打算支援的所有 AT 來測試最終程式碼。
錯誤
建立無障礙表單時，您可以採取很多做法來防止使用者做出表單錯誤。在本單元的先前部分中，我們說明瞭清楚標記欄位、建立識別標籤，以及盡可能加入詳細的說明。但不論您認為表單有多清楚，最終使用者都會犯錯。
使用者遇到表單錯誤時，第一步是錯誤已知錯誤。必須清楚指明發生錯誤的欄位，且必須以文字向使用者說明錯誤本身。
您可以利用不同方法顯示錯誤訊息，例如：
- 內嵌在錯誤位置附近的彈出式視窗
- 一組錯誤 (網頁頂端以一則較大的訊息分組)
發布錯誤時，請務必留意鍵盤焦點和 ARIA 即時區域選項。
請盡可能為使用者提供修正錯誤的詳細建議。有兩種屬性可用來通知使用者發生錯誤，
- 你可以使用 HTML 必要屬性。瀏覽器會根據提交的驗證參數，提供一般錯誤訊息。
- 您也可以使用 aria-required 屬性，將自訂錯誤訊息提供給 AT。除非您新增其他程式碼，讓所有使用者都能查看訊息，否則只有 AT 才會收到訊息。
當使用者認為所有錯誤都已解決後，請允許他們重新提交表單，並針對提交結果提供意見回饋。錯誤訊息會告知使用者有其他需要更新，成功訊息則確認使用者已解決所有錯誤並成功提交表單。
隨堂測驗
測驗您對無障礙表單的相關知識
以下何者是最容易輸入的表單輸入方式？
Email address: <input type="email" required><label>Email address: <input type="email" required></label><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>