預設 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 變更螢幕上元素的視覺位置時，請務必小心。這可能會導致分頁順序四處移動，看似隨機且混淆使用者，依賴鍵盤。因此，Web AIM 檢查清單指出的讀取和導覽順序 (由程式碼順序決定) 應有邏輯和符合直覺的 1.3.2 節。
原則上，建議您盡量頻繁切換網頁，以免不小心打錯分頁順序。這個習慣比較好 不需要花費太多心力
畫面外內容
如果您有內容目前未顯示，但仍需要在 DOM 內 (例如回應式側邊導覽)，該怎麼辦？如果這類元素在畫面關閉時進入焦點，看起來可能會像焦點消失，並在使用者分頁重複出現時，顯然是不想要的效果。在理想情況下，我們應避免面板在螢幕外時取得焦點，並只允許在使用者與其互動時聚焦。
您有時可能需要多處理一些偵測工作，才能找出焦點已移至何處。您可以使用控制台中的 document.activeElement 確認目前聚焦的元素。
找出目前聚焦的畫面元素後，可以將其設為 display: none 或 visibility: hidden，然後將其設為 display:
block 或 visibility: visible，然後再向使用者顯示。
一般而言，我們建議開發人員在每次發布前依序瀏覽網站，找出分頁順序不會消失或跳離邏輯序列。如果答案為是，請務必使用 display: none 或 visibility: hidden 正確隱藏螢幕外內容，或是在 DOM 中重新排列元素的實際位置，讓元素按照邏輯順序排列。