您打造的表單適用於個人。 使用者會使用不同的裝置， 有些人使用滑鼠、觸控裝置和部分鍵盤 某些裝置是透過眼睛移動 來控制裝置 部分裝置則使用螢幕閱讀器 (例如小螢幕) 和文字放大軟體。 大家想共用表單瞭解如何讓每位使用者都能存取及存取表單。
確保使用者瞭解表單欄位的用途
有許多表單控制項可供選擇。
這些機型有什麼共通點？
每個表單控制項都必須有相關聯的 <label> 元素。
<label> 元素說明表單控制項的用途。
<label> 文字透過視覺呈現與表單控制項相關聯，並由螢幕閱讀器朗讀。
此外，輕觸或按一下 <label> 即可將焦點移至相關表單控制項。
擴大攻擊範圍
透過有意義的 HTML 存取瀏覽器內建功能
在理論上，您可以只使用 <div> 元素建立表單。
您甚至可以讓它看起來像原生的 <form>。
使用 AI 會有什麼問題？
非語意元素？
內建的表單元素提供許多內建功能。一起來看看這個範例。
視覺上，<input> (範例中的第一個) 和 <div> 看起來一樣。
由於 <div> 具有
contenteditable 屬性。
不過，使用適當的 <input> 元素和 <div> 之間有許多差異
看起來像 <input>。
螢幕閱讀器使用者未將 <div> 辨識為輸入元素。
而無法填寫表單
螢幕閱讀器使用者聽到的所有音效都是「名稱」
且沒有指出元素是新增文字的表單控制項。
按一下 <div>Name</div> 不會聚焦與其相關的 <div>，而 <label> 和
使用 for 和 id 屬性來連結 <input>。
提交表單後，你在 <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 中使用何種樣式，
務必確保預設狀態和焦點狀態之間的視覺差異可辨識
進一步瞭解 設計焦點指標。
確認表單可供使用
您可以用不同裝置填寫表單，藉此找出許多常見問題。 透過螢幕閱讀器 (例如 NVDA (Windows 或 Windows) VoiceOver (Mac))， 或將網頁縮放至 200%。 務必在不同平台上測試表單 尤其是您每天未使用的裝置或設定 你知道有人在使用螢幕閱讀器嗎？ 或有人使用文字放大軟體嗎？要求他們填寫表單。 無障礙設計審查很不錯，建議您對真人使用者進行測試。
進一步瞭解如何 無障礙功能審查 以及如何邀請實際使用者進行測試