預設 DOM 順序的重要性
使用原生元素是瞭解焦點行為的絕佳方式，因為這類元素會根據在 DOM 中的位置自動插入分頁標籤順序。
例如，您可能有三個按鈕元素，一個接在 DOM 中的元素。按下 Tab 即可將焦點逐一聚焦按鈕。請嘗試點選下方的程式碼區塊來移動焦點導覽起點，然後按下 Tab，即可將焦點移到按鈕之間。
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
不過請注意，使用 CSS 時，系統可能會在 DOM 中以一個順序列出項目，但在螢幕上會以不同順序顯示。舉例來說，如果您使用 float 等 CSS 屬性將某個按鈕移至右側，按鈕在螢幕上會以不同順序顯示。但由於在 DOM 中的順序維持不變，因此分頁標籤的順序會一樣。當使用者瀏覽頁面時，按鈕會以非直覺順序聚焦。請嘗試按一下下方的程式碼區塊來移動焦點導覽起點，然後按下 Tab，即可將焦點移到按鈕之間。
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
使用 CSS 變更畫面上元素的視覺位置時，請務必謹慎。這可能會導致分頁順序在仰賴鍵盤的使用者看來，看似隨機而感到困惑。因此，第 1.3.2 節的 Web AIM 檢查清單指出，讀取和導覽順序 (依程式碼順序決定) 應具備邏輯和直覺。
原則上，請時常嘗試瀏覽網頁，確保您不會意外破壞分頁順序。你可以養成採用習慣的習慣 不需要投入太多心力
畫面外的內容
如果您有目前未顯示的內容，但仍需要在 DOM 中使用 (例如回應式側邊導覽列)，該怎麼辦？如果有這類元素會在畫面外時接收焦點，焦點可能會看起來像是在使用者瀏覽頁面時消失，然後又以分頁的形式再次出現，顯然是不理想的效果。在理想情況下，當面板關閉時，應避免讓面板取得焦點，並只在使用者與介面互動時才聚焦。
有時，您可能要執行一些偵測工作，才能找出焦點消失的位置。您可以使用主控台中的 document.activeElement 找出目前聚焦的元素。
瞭解焦點所在的畫面外元素後，您可以將元素設為 display: none 或 visibility: hidden，然後在向使用者顯示前將其設回 display:
block 或 visibility: visible。
一般來說，我們建議開發人員在每次發布前瀏覽網站，確認分頁順序不會消失或跳脫邏輯順序。如果可以，您應確保使用 display: none 或 visibility: hidden 正確隱藏畫面外內容，或是重新排列 DOM 中的元素實際位置，讓這些內容依邏輯順序排列。