跨裝置和平台測試表單

填寫表單的方法有很多種， 站在擁擠公車時，使用者可能會透過智慧型手機使用表單， 或是使用舊筆記型電腦 現在就來說明如何在不同裝置上，確保表單適用於各種不同的情境。

確認表單適用於鍵盤使用者

為確保表單可供存取，第一個確保表單可供存取的最佳方法是，僅使用鍵盤填寫。 開啟表單，並嘗試使用 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 可以為開放原始碼專案提供免費測試帳戶。 和瀏覽器均提供免費試用，可在不同瀏覽器上進行測試。 裝置和作業系統

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

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

進一步瞭解 色彩和對比無障礙功能。

確認表單可在連線品質不佳時正常運作

假設您在火車上旅行， 在手機上開啟網頁。 不知道為什麼網站載入需要很長的時間 有時 想知道，

您可以透過 WebPageTest 或 DevTools。

進一步瞭解 以低頻寬和高延遲進行測試。

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

假設您正要去預約看， 這時你的手機會響起、接聽來電，同時你也會 接收保險公司快訊，完成您填寫的申請表。 您開啟了表單，嘗試一邊走路一邊說話。

提醒你，使用者會在多種情況下使用你的表單。 在備感壓力的情況下，隨時隨地都能做其他事。 如要協助使用者確保表單易於使用，

您可以設定自己的表單時限。 請模擬出現瑕疵的情況，以便測試表單內容。

請務必分享測試結果

記錄所有測試結果並與團隊分享。 這有助於安排待辦事項的優先順序 確保團隊成員都知道最重要的工作。

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

隨堂測驗

測試您對跨平台測試的瞭解程度

資源

• WebPageTest：網站效能和最佳化測試
• 以低頻寬和高延遲測試
• 分享測試結果