無障礙功能

您打造的表單適用於個人。 使用者會使用不同的裝置， 有些人使用滑鼠、觸控裝置和部分鍵盤 某些裝置是透過眼睛移動 來控制裝置 部分裝置則使用螢幕閱讀器 (例如小螢幕) 和文字放大軟體。 大家想共用表單瞭解如何讓每位使用者都能存取及存取表單。

確保使用者瞭解表單欄位的用途

有許多表單控制項可供選擇。 這些機型有什麼共通點？ 每個表單控制項都必須有相關聯的 <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%。 務必在不同平台上測試表單 尤其是您每天未使用的裝置或設定 你知道有人在使用螢幕閱讀器嗎？ 或有人使用文字放大軟體嗎？要求他們填寫表單。 無障礙設計審查很不錯，建議您對真人使用者進行測試。

進一步瞭解如何 無障礙功能審查 以及如何邀請實際使用者進行測試

資源