鍵盤存取基礎知識

Rob Dodson

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

焦點和分頁順序

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

如要將焦點移至頁面，請使用 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

後續步驟

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