您建立的表單適用於使用者。每個人使用的裝置都不同。 例如使用滑鼠、觸控裝置、一些鍵盤,或是由眼睛移動控制的裝置。有些使用螢幕閱讀器、有些螢幕太小,有些則是使用文字放大軟體。大家都想使用表單,瞭解如何讓所有人都能輕鬆存取表單。
確保使用者瞭解表單欄位的用途
有多種表單控制項可供選擇。這些機型有什麼共通點?
每個表單控制項都必須有相關聯的 <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%。 請務必透過不同平台 (尤其是您不會每天使用的裝置或設定) 測試表單。你知道有人正在使用螢幕閱讀器 或有人使用文字放大軟體嗎?請他們填寫表單。 無障礙程度審查很棒,邀請使用者參加測試將更棒。
進一步瞭解如何執行無障礙功能審查,以及如何使用實際使用者進行測試。