許多不同的使用者都會依賴鍵盤瀏覽應用程式，不論是臨時和永久性動作障礙的使用者，還是使用鍵盤快速鍵的使用者，都能透過鍵盤更高效、更有效率。為應用程式採用良好的鍵盤導覽策略，可為所有使用者提供更優質的體驗。
焦點和分頁順序
在特定時刻，焦點是指應用程式中目前接收鍵盤輸入內容的元素 (例如欄位、核取方塊、按鈕或連結)。除了接收鍵盤事件，焦點元素也會取得從剪貼簿貼上的內容。
如要將焦點移至頁面，請使用 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: nonevisibility: hidden
如要將元素重新加入分頁順序 (例如在側邊導覽功能開啟時)，請分別將上述 CSS 屬性替換為：
display: blockvisibility: visible
後續步驟
如果使用者幾乎完全透過鍵盤或其他輸入裝置操作電腦，您就必須安排合理的分頁順序，讓應用程式更易於存取及使用。為了養成檢查分頁順序的好習慣，請嘗試在每次發布前透過分頁瀏覽應用程式。