DOM 順序很重要

預設 DOM 順序的重要性

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney
Rob Dodson

使用原生元素是瞭解焦點行為的好方法 因為系統會根據 在 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 節 根據程式碼順序決定的讀數和導覽順序，應該應該是 有條理且符合直覺

原則上，我們建議您盡量不頻繁地切換網頁，確保 以免不小心打錯分頁順序是個好習慣， 執行起來不費力

畫面外內容

如果您所擁有的內容目前尚未顯示，但仍需要 ，例如回應式側邊導覽？如果有這類元素 讓焦點在離開螢幕時，聽起來就像是 在使用者分頁頁面中消失時消失 非預期效果理想情況下 且只能在使用者可與使用者互動時聚焦 。

螢幕外滑入面板可能會竊取焦點。

有時您必須多做點偵測作業，才能找出 消失您可以使用控制台中的 document.activeElement 找出 元素。

瞭解焦點所在的畫面外元素後，您可以將該元素設定為 display: none 或 visibility: hidden，然後再次設為 display: block 或 visibility: visible，然後再向使用者顯示。

設為不顯示任何滑入式面板。
設為顯示區塊的滑入式面板。

一般而言，我們建議開發人員在各個網站 您將看到分頁順序沒有消失或跳離邏輯 序列如果是，請務必透過適當位置 含有 display: none 或 visibility: hidden 的螢幕外內容，或 重新排列元素這些實體在 DOM 中的位置，讓這些物件出現在 順序。