預設 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 節 根據程式碼順序決定的讀數和導覽順序,應該應該是 有條理且符合直覺
原則上,我們建議您盡量不頻繁地切換網頁,確保 以免不小心打錯分頁順序是個好習慣, 執行起來不費力
畫面外內容
如果您所擁有的內容目前尚未顯示,但仍需要 ,例如回應式側邊導覽?如果有這類元素 讓焦點在離開螢幕時,聽起來就像是 在使用者分頁頁面中消失時消失 非預期效果理想情況下 且只能在使用者可與使用者互動時聚焦 。
![螢幕外滑入面板可能會竊取焦點。](https://web.developers.google.cn/static/articles/dom-order-matters/image/an-offscreen-slide-panel-418516732500b.png?authuser=19&hl=zh-tw)
有時您必須多做點偵測作業,才能找出
消失您可以使用控制台中的 document.activeElement
找出
元素。
瞭解焦點所在的畫面外元素後,您可以將該元素設定為
display: none
或 visibility: hidden
,然後再次設為 display:
block
或 visibility: visible
,然後再向使用者顯示。
![設為不顯示任何滑入式面板。](https://web.developers.google.cn/static/articles/dom-order-matters/image/a-slide-panel-set-displ-4e959c65a9e47.png?authuser=19&hl=zh-tw)
![設為顯示區塊的滑入式面板。](https://web.developers.google.cn/static/articles/dom-order-matters/image/a-slide-panel-set-displ-ccba12904336f.png?authuser=19&hl=zh-tw)
一般而言,我們建議開發人員在各個網站
您將看到分頁順序沒有消失或跳離邏輯
序列如果是,請務必透過適當位置
含有 display: none
或 visibility: hidden
的螢幕外內容,或
重新排列元素這些實體在 DOM 中的位置,讓這些物件出現在
順序。