鍵盤存取基礎知識

Rob Dodson

許多使用者都會使用鍵盤瀏覽應用程式，包括暫時性和永久性動作障礙使用者，以及使用鍵盤快捷鍵提高工作效率的使用者。為應用程式採用良好的鍵盤導覽策略，可為所有使用者提供更優質的體驗。

焦點和分頁順序

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

如要將焦點移至頁面，請使用 TAB 前進，SHIFT + TAB 則可往後移動。目前聚焦的元素通常會以聚焦環表示，不同瀏覽器的聚焦環樣式也不同。焦點在互動元素中向前和向後移動的順序稱為「分頁順序」。

文字欄位、按鈕和選取清單等互動式 HTML 元素是隱含可聚焦的元素，也就是說，系統會根據這些元素在 DOM 中的順序，自動將這些元素插入分頁順序。這些互動式元素也內建鍵盤事件處理機制。段落和 div 等元素並未預設為可聚焦，因為使用者通常不需要與這些元素互動。

實作合理的分頁順序，是為使用者提供順暢鍵盤導覽體驗的重要環節。評估及調整分頁順序時，請牢記以下兩個主要概念：

  1. 將 DOM 中的元素排列在邏輯順序中
  2. 正確設定不應接收焦點的畫面外內容可見度

將 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

後續步驟

如果使用者幾乎完全透過鍵盤或其他輸入裝置操作電腦，您就必須安排合理的分頁順序，讓應用程式更易於存取及使用。為了養成檢查分頁順序的好習慣，請嘗試在每次發布前透過分頁瀏覽應用程式。