您建立的表單適用於使用者。每個人使用的裝置都不同。 例如使用滑鼠、觸控裝置、一些鍵盤，或是由眼睛移動控制的裝置。有些使用螢幕閱讀器、有些螢幕太小，有些則是使用文字放大軟體。大家都想使用表單，瞭解如何讓所有人都能輕鬆存取表單。
確保使用者瞭解表單欄位的用途
有多種表單控制項可供選擇。這些機型有什麼共通點？
每個表單控制項都必須有相關聯的 <label> 元素。<label> 元素會說明表單控制項的用途。<label> 文字會以視覺元素與表單控制項建立關聯，並由螢幕閱讀器朗讀出來。
此外，輕觸或點選 <label> 即可將焦點移至相關的表單控制項，使其成為更大的目標。
使用有意義的 HTML 存取瀏覽器內建功能
理論上，您可以使用只使用 <div> 元素來建立表單。您甚至可以使其看起來為原生 <form>。使用非語意元素會有什麼問題？
內建表單元素提供許多內建功能。一起來看看這個範例。
看來，<input> (範例中的第一個函式) 和 <div> 看起來相同。您甚至可以插入這兩種文字，因為 <div> 具有 contenteditable 屬性。但是，使用適當的 <input> 元素與看起來像 <input> 的 <div> 之間有許多差異。
螢幕閱讀器使用者不將 <div> 辨識為輸入元素，因此無法填寫表單。所有螢幕閱讀器使用者聽到的都是「Name」，但沒有指示該元素是用來新增文字的表單控制項。
按一下 <div>Name</div> 不會聚焦於與它相關的 <div>，而 <label> 和 <input> 則會使用 for 和 id 屬性進行連結。
提交表單後，在 <div> 中輸入的資料就不會包含在要求中。雖然可以使用 JavaScript 附加資料，但 <input> 預設會執行這項作業。
內建表單元素具備其他功能。舉例來說，如果設定適當的表單元素和正確的 inputmode 或 type，螢幕小鍵盤會顯示適當的字元。對 <div> 使用 inputmode 屬性無法執行此操作。
確保使用者瞭解預期的資料格式
您可以為表單控制項定義各種驗證規則。舉例來說，假設表單欄位應至少要有 8 個字元。使用 minlength 屬性，指出對瀏覽器的驗證規則。如何確保使用者也能瞭解驗證規則？告訴他們。
直接在表單控制項下方加入預期格式的相關資訊。
如要明確指出輔助裝置，請使用表單控制項中的 aria-describedby 屬性，並在錯誤訊息相同值的錯誤訊息上使用 id，以連結兩者。
協助使用者找到表單控制項的錯誤訊息
在之前有關驗證的單元中，您已學會如何在資料輸入無效時顯示錯誤訊息。
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
舉例來說，如果欄位含有 required 屬性，且輸入的資料無效，瀏覽器在提交表單時，會在表單控制項旁顯示錯誤訊息。螢幕閱讀器也會朗讀錯誤訊息。
您也可以自行定義錯誤訊息：
這個範例需要進行更多變更，才能將錯誤訊息連結至表單控制項。
最簡單的方法是在表單控制項上使用 aria-describedby 屬性，該屬性與錯誤訊息元素的 id 相符。接著，使用 aria-live="assertive" 顯示錯誤訊息。ARIA 即時區域會在顯示錯誤訊息時通知螢幕閱讀器使用者。
這個方法如果有多個欄位，則 aria-live 通常只會在多個錯誤的情況下公布第一個錯誤。如這篇文章中關於相同動作的多則 aria-live 公告所述，您可以透過串連所有錯誤來建立單一訊息。另一個做法是宣布發生錯誤，然後在聚焦於欄位時宣布個別錯誤。
確保使用者辨識錯誤
有時設計人員會使用 :invalid 虛擬類別，將無效的狀態標示為紅色。不過，如要傳達錯誤或成功情況，請勿只依賴顏色。對於紅綠色盲人而言，綠色和紅色邊框幾乎相同。我們很難確認訊息是否與錯誤有關。
除了顏色之外，請使用圖示，或是在錯誤訊息的前面加上錯誤類型。
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
協助使用者瀏覽表單
您可以使用 CSS 變更表單控制項的視覺順序。 視覺順序和鍵盤導覽 (DOM 順序) 之間的連線對螢幕閱讀器和鍵盤使用者來說會造成問題。
進一步瞭解如何確保網頁上的圖像順序符合 DOM 順序。
協助使用者找出目前聚焦的表單控制項
使用鍵盤瀏覽這份表單。您知道表單控制項啟用後，樣式設定有變動嗎？這是預設的焦點樣式。您可以使用 :focus CSS 虛擬類別加以覆寫。無論在 :focus 中使用的樣式為何，請務必確保預設狀態和焦點狀態之間的視覺差異清晰可辨。
進一步瞭解如何設計焦點指標。
確認表單可用
使用不同裝置填寫表單，即可找出許多常見問題。 僅使用鍵盤、使用螢幕閱讀器 (例如 Windows 的 NVDA 或 Mac 的 VoiceOver)，或是將頁面縮放至 200%。 請務必透過不同平台 (尤其是您不會每天使用的裝置或設定) 測試表單。你知道有人正在使用螢幕閱讀器 或有人使用文字放大軟體嗎？請他們填寫表單。 無障礙程度審查很棒，邀請使用者參加測試將更棒。
進一步瞭解如何執行無障礙功能審查，以及如何使用實際使用者進行測試。