DOM 順序至關重要

使用原生元素對了解焦點行爲極有幫助,因爲是根據這些元素在 DOM 中的位置自動將它們插入跳格順序的。

例如,您可能有三個 button 元素,在 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: nonevisibility: hidden,然後恢復其原來的設置 display: blockvisibility: visible,最後再顯示給用戶。

設置爲不顯示任何內容的滑入式面板

設置爲顯示區塊的滑入式面板

一般而言,我們鼓勵開發者在每次發佈前在網站上循環跳格,確保跳格順序不會消失或不按邏輯順序地亂跳。如果存在問題,則應確保使用 display: nonevisibility: hidden 正確隱藏了屏幕外內容,或者重新安排元素在 DOM 中的物理位置,使它們按邏輯順序排列。