許多不同的使用者都會依賴鍵盤瀏覽應用程式,不論是臨時和永久性動作障礙的使用者,還是使用鍵盤快速鍵的使用者,都能透過鍵盤提升效率和生產力。為應用程式採用完善的鍵盤瀏覽策略,可為所有人提供更優質的體驗。
焦點和分頁順序
在特定時間點,「焦點」是指應用程式中目前從鍵盤接收輸入內容的元素 (例如欄位、核取方塊、按鈕或連結)。除了接收鍵盤事件外,聚焦的元素也會取得從剪貼簿貼上的內容。
如要將焦點移至頁面,請使用 TAB
前往「下一頁」,使用 SHIFT + TAB
瀏覽「向後」。目前聚焦的元素通常以「聚焦環」表示,每種瀏覽器都有不同的焦點環樣式。「分頁順序」是指焦點在互動元素中的前後推向連續方向。
文字欄位、按鈕和選取清單等互動式 HTML 元素可自動聚焦:系統會根據元素在 DOM 中的位置自動插入分頁順序。這些互動式元素也內建鍵盤事件處理功能。使用者通常不需要與段落和 div 等元素互動,因此不明確聚焦。
如要為使用者提供順暢的鍵盤瀏覽體驗,實作邏輯分頁順序是很重要的一環。評估及調整分頁順序時,請謹記兩個主要概念:
- 依照邏輯順序排列 DOM 中的元素
- 正確設定不應接收焦點的畫面外內容顯示設定
依照邏輯順序排列 DOM 中的元素
如要檢查應用程式分頁順序是否合理,請嘗試使用 Tab 鍵切換頁面。一般來說,焦點應依循閱讀順序,從左到右移動,從頂端到底部。
如果焦點順序有誤,您應該重新排列 DOM 中的元素,讓分頁的順序更自然。如果您希望畫面提早顯示項目,請更早在 DOM 中移動項目。
請嘗試使用 Tab 鍵瀏覽下方兩組按鈕,體驗邏輯分頁順序與不邏輯的分頁順序:
邏輯分頁順序
邏輯分頁順序
以下比較這兩個範例的程式碼:
邏輯分頁順序
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
邏輯分頁順序
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
使用 CSS 變更元素的視覺位置時,請務必小心,以免建立不規則的分頁順序。如要修正上述錯誤的分頁順序,請移動浮動的「Kiwi」按鈕,讓按鈕位於 DOM 中的「Coconut」按鈕之後,然後移除內嵌樣式。
正確設定畫面外內容的瀏覽權限
有時螢幕外的互動元素必須存放在 DOM,但不應在分頁順序中。舉例來說,如果點選按鈕後會開啟回應式側邊導覽列,使用者就不應聚焦在側邊導覽列。
如要禁止特定互動式元素接收焦點,請提供下列其中一項 CSS 屬性元素:
display: none
visibility: hidden
如要將元素加回分頁順序 (例如開啟側邊導覽列時),請分別將上述 CSS 屬性替換為:
display: block
visibility: visible
後續步驟
對於幾乎完全使用鍵盤或其他輸入裝置操作電腦的使用者,如要讓應用程式易於存取及使用,就必須設定邏輯分頁順序。建議您嘗試在每次發布前執行分頁瀏覽。