許多使用者都會使用鍵盤瀏覽應用程式,包括暫時性和永久性動作障礙使用者,以及使用鍵盤快捷鍵提高工作效率的使用者。為應用程式採用良好的鍵盤導覽策略,可為所有使用者提供更優質的體驗。
焦點和分頁順序
在特定時刻,焦點是指應用程式中目前接收鍵盤輸入內容的元素 (例如欄位、核取方塊、按鈕或連結)。除了接收鍵盤事件,焦點元素也會取得從剪貼簿貼上的內容。
如要將焦點移至頁面,請使用 TAB
前進,SHIFT + TAB
則可往後移動。目前聚焦的元素通常會以聚焦環表示,不同瀏覽器的聚焦環樣式也不同。焦點在互動元素中向前和向後移動的順序稱為「分頁順序」。
文字欄位、按鈕和選取清單等互動式 HTML 元素是隱含可聚焦的元素,也就是說,系統會根據這些元素在 DOM 中的順序,自動將這些元素插入分頁順序。這些互動式元素也內建鍵盤事件處理機制。段落和 div 等元素並未預設為可聚焦,因為使用者通常不需要與這些元素互動。
實作合理的分頁順序,是為使用者提供順暢鍵盤導覽體驗的重要環節。評估及調整分頁順序時,請牢記以下兩個主要概念:
- 將 DOM 中的元素排列在邏輯順序中
- 正確設定不應接收焦點的畫面外內容可見度
將 DOM 中的元素排列在邏輯順序中
如要確認應用程式的分頁順序是否合理,請嘗試在頁面中使用分頁鍵。一般來說,焦點應按照閱讀順序,從左至右、從頁面頂端到底部移動。
如果焦點順序似乎有誤,您應該重新排列 DOM 中的元素,讓分頁順序更自然。如果您希望某些內容在畫面上顯示得更早,請在 DOM 中將其移到更前面的位置。
請嘗試按下下方兩組按鈕,體驗合理的分頁順序和不合理的順序:
邏輯分頁順序
分頁順序不合理
以下比較這兩個範例的程式碼:
邏輯分頁順序
<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
後續步驟
如果使用者幾乎完全透過鍵盤或其他輸入裝置操作電腦,您就必須安排合理的分頁順序,讓應用程式更易於存取及使用。為了養成檢查分頁順序的好習慣,請嘗試在每次發布前透過分頁瀏覽應用程式。