您可以透過多種方式填寫表單。 使用者可能在人機擁擠的公車上、螢幕閱讀器或舊筆電上使用智慧型手機,讓我們來瞭解如何確保表單可在各種裝置上運作。
確保鍵盤使用者能使用表單
建議您只使用鍵盤填寫表單,確保表單可供存取,建議您先測試一下。
開啟表單,並嘗試使用 tab
鍵瀏覽。
您是否清楚知道目前正在使用的表單欄位?
為協助使用者瞭解使用中的表單欄位,您可以使用焦點指標。
立即試用。
使用 tab
鍵前往輸入內容。輸入內容啟用時,您是否看到外框?這就是焦點指標。您可以使用 :focus
CSS 虛擬類別新增焦點指標。
input:focus {
outline: 4px solid #222;
}
進一步瞭解如何設計無障礙焦點指標。
協助使用者瀏覽表單
另一個良好可用性和無障礙功能的測試,是確保邏輯分頁的順序符合視覺分頁標籤的順序。 如何測試分頁順序? 逐頁瀏覽表單。 你是否注意到任何不當的導覽跳動情形? 確認 DOM 順序與視覺順序相符。
進一步瞭解如何確保網頁上的視覺順序符合 DOM 順序。
協助使用者在觸控裝置上填寫表單
太好了!你確認表單支援鍵盤。 接下來,我們將說明如何確保它也適用於手機等觸控式裝置。
在觸控裝置上開啟表單,填寫所有欄位並提交表單。你需要輕觸數次才能選取表單控制項嗎?
問題可能是輕觸區域過小。請確保按鈕的輕觸目標大小至少為 48 像素,且每個 <input>
和 <select>
都夠大,可供輕觸。也可以在表單控制項之間加入足夠間距,協助使用者透過觸控裝置瀏覽表單。
確保使用者享有最佳化的鍵盤
在先前的單元中,您已瞭解如何使用 type
或 inputmode
屬性啟用不同的螢幕小鍵盤。
在手機上開啟示範,然後輕觸電話號碼欄位。請注意,螢幕小鍵盤預設會顯示數字,以及其他您可能需要輸入電話號碼的字元。使用 type="tel"
讓螢幕小鍵盤適合輸入電話號碼。
請用手機自行試用,看看是否能輕鬆輸入每個填寫電話號碼所需的字元。如果你想知道螢幕小鍵盤如何用於另一個 type
,請參考示範中的 type="email"
。
確認表單按鈕未隱藏
想像您填寫了長篇表單
準備提交時但「提交」按鈕在哪裡?
可能位於瀏覽器工具列後方,位於畫面底部。
為確保按鈕顯示在畫面上,其中一種方法是使用 env()
CSS 函式。
瞭解如何確保裝置使用者介面不會遮擋按鈕。
確保表單可在不同平台上運作
請盡可能在更多裝置上測試表單。 您有舊款筆記型電腦嗎?開啟預設瀏覽器,然後測試表單。 你的朋友有平板電腦嗎?借閱並測試你的表單。
某些樣式在不同瀏覽器中看起來會有差異嗎? 在後續單元中,請參閱這篇文章,瞭解如何確保樣式在不同平台都能正常運作。
BrowserStack 為開放原始碼專案提供免費的測試帳戶,Browserling 則提供在不同瀏覽器、裝置和作業系統上測試的免費試用期。
協助使用者在不同情況下填妥表單
使用者不只是使用不同的瀏覽器、裝置和作業系統,使用者也會在不同情況下使用表單。 快試試看吧!現在外面是不是在曬太陽?帶手機出門。 在明亮光源使用表單有助於測試對比度是否可用。
進一步瞭解顏色和對比無障礙設計。
確保表單可正常運作
假設您搭火車前往某個地點。 你在手機上開啟網頁。 難怪網站載入速度太久 ↀ。
您可以使用 WebPageTest 或 DevTools 模擬慢速連線和不同網路類型。
進一步瞭解如何使用低頻寬和高延遲時間進行測試。
協助使用者隨時隨地使用表單
假設您正走路到約會。 突然間,手機會響起並接聽來電。同時,你也會收到保險公司的快訊,方便他們填寫你開始的申請表。您開啟了表單,試著在走路和說話的過程中試著填寫表單。
提醒您,使用者會在許多情況下使用您的表單。 但當您出門在外又需要處理其他事務時,卻遭遇壓力。 如要協助使用者,請確保表單易於使用。
你可以設定時間限制,讓系統完成表單填寫。 試著模擬不完美的情況,以便測試表單。
請務必分享測試結果
記錄所有測試,並與團隊成員分享結果。這樣就能排定待辦事項的優先順序,確保每位團隊成員都瞭解到最重要的工作。
進一步瞭解如何分享測試結果。
隨堂測驗
測驗您對跨平台測試的相關知識
您可以只為鍵盤使用者顯示焦點指標嗎?
:focus-visible
。:focus-detected
。:focus-shown
。資源
- WebPageTest:網站效能和最佳化測試
- 在低頻寬和高延遲時間的情況下進行測試
- 分享測試結果