預設 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 中元素的實際位置，讓元素排列在邏輯順序中。