鍵盤存取基礎知識

許多不同的使用者都會依賴鍵盤瀏覽應用程式,不論是臨時和永久性動作障礙的使用者,還是使用鍵盤快速鍵的使用者,都能透過鍵盤提升效率和生產力。為應用程式採用完善的鍵盤瀏覽策略,可為所有人提供更優質的體驗。

焦點和分頁順序

在特定時間點,「焦點」是指應用程式中目前從鍵盤接收輸入內容的元素 (例如欄位、核取方塊、按鈕或連結)。除了接收鍵盤事件外,聚焦的元素也會取得從剪貼簿貼上的內容。

如要將焦點移至頁面,請使用 TAB 前往「下一頁」,使用 SHIFT + TAB 瀏覽「向後」。目前聚焦的元素通常以「聚焦環」表示,每種瀏覽器都有不同的焦點環樣式。「分頁順序」是指焦點在互動元素中的前後推向連續方向。

文字欄位、按鈕和選取清單等互動式 HTML 元素可自動聚焦:系統會根據元素在 DOM 中的位置自動插入分頁順序。這些互動式元素也內建鍵盤事件處理功能。使用者通常不需要與段落和 div 等元素互動,因此不明確聚焦。

如要為使用者提供順暢的鍵盤瀏覽體驗,實作邏輯分頁順序是很重要的一環。評估及調整分頁順序時,請謹記兩個主要概念:

  1. 依照邏輯順序排列 DOM 中的元素
  2. 正確設定不應接收焦點的畫面外內容顯示設定

依照邏輯順序排列 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

後續步驟

對於幾乎完全使用鍵盤或其他輸入裝置操作電腦的使用者,如要讓應用程式易於存取及使用,就必須設定邏輯分頁順序。建議您嘗試在每次發布前執行分頁瀏覽