跨裝置和平台測試表單

您可以透過多種方式填寫表單。 使用者可能在人機擁擠的公車上、螢幕閱讀器或舊筆電上使用智慧型手機，讓我們來瞭解如何確保表單可在各種裝置上運作。

確保鍵盤使用者能使用表單

建議您只使用鍵盤填寫表單，確保表單可供存取，建議您先測試一下。 開啟表單，並嘗試使用 tab 鍵瀏覽。 您是否清楚知道目前正在使用的表單欄位？ 為協助使用者瞭解使用中的表單欄位，您可以使用焦點指標。

立即試用。 使用 tab 鍵前往輸入內容。輸入內容啟用時，您是否看到外框？這就是焦點指標。您可以使用 :focus CSS 虛擬類別新增焦點指標。

input:focus {
  outline: 4px solid #222;
}

進一步瞭解如何設計無障礙焦點指標。

協助使用者瀏覽表單

另一個良好可用性和無障礙功能的測試，是確保邏輯分頁的順序符合視覺分頁標籤的順序。 如何測試分頁順序？ 逐頁瀏覽表單。 你是否注意到任何不當的導覽跳動情形？ 確認 DOM 順序與視覺順序相符。

進一步瞭解如何確保網頁上的視覺順序符合 DOM 順序。

協助使用者在觸控裝置上填寫表單

太好了！你確認表單支援鍵盤。 接下來，我們將說明如何確保它也適用於手機等觸控式裝置。

在觸控裝置上開啟表單，填寫所有欄位並提交表單。你需要輕觸數次才能選取表單控制項嗎？ 問題可能是輕觸區域過小。請確保按鈕的輕觸目標大小至少為 48 像素，且每個 <input> 和 <select> 都夠大，可供輕觸。也可以在表單控制項之間加入足夠間距，協助使用者透過觸控裝置瀏覽表單。

確保使用者享有最佳化的鍵盤

在先前的單元中，您已瞭解如何使用 type 或 inputmode 屬性啟用不同的螢幕小鍵盤。

在手機上開啟示範，然後輕觸電話號碼欄位。請注意，螢幕小鍵盤預設會顯示數字，以及其他您可能需要輸入電話號碼的字元。使用 type="tel" 讓螢幕小鍵盤適合輸入電話號碼。

兩張螢幕截圖顯示 iOS 和 Android 上有 type=&#39;tel&#39; 的輸入元素，顯示類型屬性變更螢幕小鍵盤的方式。

請用手機自行試用，看看是否能輕鬆輸入每個填寫電話號碼所需的字元。如果你想知道螢幕小鍵盤如何用於另一個 type，請參考示範中的 type="email"。

確認表單按鈕未隱藏

想像您填寫了長篇表單 準備提交時但「提交」按鈕在哪裡？ 可能位於瀏覽器工具列後方，位於畫面底部。 為確保按鈕顯示在畫面上，其中一種方法是使用 env() CSS 函式。 瞭解如何確保裝置使用者介面不會遮擋按鈕。

確保表單可在不同平台上運作

請盡可能在更多裝置上測試表單。 您有舊款筆記型電腦嗎？開啟預設瀏覽器，然後測試表單。 你的朋友有平板電腦嗎？借閱並測試你的表單。

某些樣式在不同瀏覽器中看起來會有差異嗎？ 在後續單元中，請參閱這篇文章，瞭解如何確保樣式在不同平台都能正常運作。

BrowserStack 為開放原始碼專案提供免費的測試帳戶，Browserling 則提供在不同瀏覽器、裝置和作業系統上測試的免費試用期。

協助使用者在不同情況下填妥表單

使用者不只是使用不同的瀏覽器、裝置和作業系統，使用者也會在不同情況下使用表單。 快試試看吧！現在外面是不是在曬太陽？帶手機出門。 在明亮光源使用表單有助於測試對比度是否可用。

進一步瞭解顏色和對比無障礙設計。

確保表單可正常運作

假設您搭火車前往某個地點。 你在手機上開啟網頁。 難怪網站載入速度太久 ↀ。

您可以使用 WebPageTest 或 DevTools 模擬慢速連線和不同網路類型。

進一步瞭解如何使用低頻寬和高延遲時間進行測試。

協助使用者隨時隨地使用表單

假設您正走路到約會。 突然間，手機會響起並接聽來電。同時，你也會收到保險公司的快訊，方便他們填寫你開始的申請表。您開啟了表單，試著在走路和說話的過程中試著填寫表單。

提醒您，使用者會在許多情況下使用您的表單。 但當您出門在外又需要處理其他事務時，卻遭遇壓力。 如要協助使用者，請確保表單易於使用。

你可以設定時間限制，讓系統完成表單填寫。 試著模擬不完美的情況，以便測試表單。

請務必分享測試結果

記錄所有測試，並與團隊成員分享結果。這樣就能排定待辦事項的優先順序，確保每位團隊成員都瞭解到最重要的工作。

進一步瞭解如何分享測試結果。

隨堂測驗

測驗您對跨平台測試的相關知識

您可以只為鍵盤使用者顯示焦點指標嗎？

否
請再試一次！
是，使用 :focus-visible。
🎉
是，使用 :focus-detected。
請再試一次！
是，使用 :focus-shown。
請再試一次！

資源