Forms

表單是可讓使用者在欄位或一組欄位中提供資料的元素。表單可以簡單到只有一個欄位，也可以複雜到包含多個欄位、輸入驗證，甚至是人機驗證的多步驟表單元素。

從無障礙的角度來看，表單是其中一個最難處理的元素，因為您必須瞭解我們已介紹的所有元素，以及表單專屬的其他規則。只要花點時間瞭解相關資訊，就能建立符合您和使用者需求的無障礙表單。

本課程的最後一個元件專屬單元是表單。本單元將著重於表單專屬指南，但您在先前單元中學到的所有其他指南，例如內容結構、鍵盤焦點和色彩對比，也適用於表單元素。

欄位

表單的骨幹就是欄位。欄位是小型互動式模式，例如輸入或圓形按鈕元素，可讓使用者輸入內容或做出選擇。您可以選擇多種表單欄位。

建議您使用已建立的 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 引進了下列成功標準，著重於提供更無障礙的表單體驗：

• 目標大小 (最低)
• 一致的協助
• 無障礙驗證
• 重複項目。

進行隨堂測驗

測驗您對無障礙表單的瞭解