許多不同的使用者都依賴鍵盤來瀏覽應用程式，例如暫時和永久性動作受損的使用者，以及使用鍵盤快速鍵提高效率和工作效率的使用者。只要為您的應用程式製定完善的鍵盤瀏覽策略，就能讓所有使用者都能享有更優質的體驗。
焦點和分頁順序
在特定時間內，「焦點」是指目前從鍵盤收到輸入的應用程式元素 (例如欄位、核取方塊、按鈕或連結)。除了接收鍵盤事件外，焦點所在的元素也會取得從剪貼簿貼上的內容。
如要將焦點移至頁面，請使用 TAB 向「前進」，並使用 SHIFT + TAB 向「返回」。目前聚焦的元素通常會以「聚焦環」表示，且各種瀏覽器會以不同的樣式設定焦點環。焦點在互動元素上往前或向後繼續的順序稱為「分頁順序」。
文字欄位、按鈕和選取清單等互動式 HTML 元素隱含可聚焦：系統會根據元素在 DOM 中的位置自動插入分頁順序。這些互動元素還具有內建鍵盤事件處理功能。使用者通常不需要與段落和 div 等元素互動，因此無法以隱含的方式聚焦。
實作邏輯分頁順序是為使用者提供順暢的鍵盤瀏覽體驗的重要一環。評估及調整分頁順序時，請留意以下兩大要點：
- 在 DOM 中依邏輯順序排列元素
- 正確設定不應接收焦點的螢幕外內容
在 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: nonevisibility: hidden
如要將元素加回分頁順序 (例如側邊導覽列開啟時)，請分別將上述 CSS 屬性替換成：
display: blockvisibility: visible
後續步驟
對於幾乎完全透過鍵盤或其他輸入裝置操作電腦的使用者，應用程式必須依照邏輯管理分頁標籤順序，才能使應用程式易於存取且可供使用。建議您習慣在每次發布前依分頁瀏覽應用程式，以防您檢查分頁順序。