Forms

表單是一種元素，可讓使用者將資料提供給欄位或群組 欄位表單可以是簡單的單一欄位，也可以是複雜的 含有多個欄位的多步驟表單元素、輸入驗證和 有時則需要進行人機驗證 (Captcha)。

表單是最難理解的 提供無障礙介面，因為這類課程需要瞭解我們 還有表單專屬的其他規則與一些 您就可以配合自己的需求製作無障礙表單 使用者。

Google 表單是本課程中的最後一個單元特定單元。本單元將 著重於表單專屬指南，但您學到的所有其他規範 先前單元提到的資訊 內容結構 鍵盤焦點，以及 色彩對比，也適用於表單 元素。

欄位

表單的骨幹是欄位。欄位是小型的互動模式，例如 輸入或圓形按鈕元素，可讓使用者輸入內容或 就是用哪一種烤箱或刀子都可以 那麼預先建構的容器或許是最佳選擇表單欄位有很多種

預設的建議是使用現成的 HTML 模式，而不是使用 使用 ARIA 來建構自訂模型 功能 (例如欄位狀態、屬性和值) 本質上 內建於 HTML 元素中，但您必須手動新增自訂 ARIA。

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

<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 會收到訊息。

使用者認為所有錯誤均已解決後，可重新提交 表單，並針對提交結果提供意見回饋。發生錯誤 訊息，告訴使用者他們有其他要更新的項目，同時顯示成功訊息 確認他們已解決所有錯誤並順利提交表單。

隨堂測驗

測試您對無障礙表單的瞭解程度