DOM 順序很重要

預設 DOM 順序的重要性

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

使用原生元素是瞭解焦點行為的好方法 因為系統會根據 在 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: nonevisibility: hidden,然後再次設為 display: blockvisibility: visible,然後再向使用者顯示。

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

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