使用 Tab 鍵控制焦點

<button><input> 等標準 HTML 元素具備鍵盤無障礙功能 ,因此應盡可能使用。不過,如果您需要建構 只要在自訂互動元素中 正在新增 tabindex

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:1.5。
  • Safari: ≤4。

資料來源

請只在互動式內容中加入 tabindex。即使內容 例如主要圖片,螢幕閱讀器使用者也能藉此瞭解 正在新增焦點

什麼是 Tabindex?

在某些情況下,您需要修改內建於內建功能提供的預設分頁順序 元素,可以使用 tabindex HTML 屬性明確設定 。

tabindex 可套用至任何元素,但此動作只能套用至 ,並接受整數範圍的值。取代為 tabindex 可以針對可聚焦網頁元素指定明確的順序 在分頁順序中插入其他無法聚焦的元素,然後移除元素 例如:

tabindex="0":以自然分頁標籤順序插入元素。元素可以 即可聚焦,而按下 Tab 鍵則可聚焦元素 其 focus() 方法。

tabindex="-1":從自然分頁順序移除元素,但元素 但仍可呼叫 focus() 方法

tabindex="5":任何大於 0 的 Tabindex 都會讓該元素出現在最前面 會與自然標籤順序排列如果有多個元素的 Tabindex 值較大 大於 0,分頁順序會從大於 0 的最低值開始 並向上擴充使用大於 0 的 Tabindex 會視為 反模式

確保可透過鍵盤存取控制選項

Lighthouse 等工具非常適合用來自動偵測特定無障礙設施 不過,部分測試仍必須人工進行。

請嘗試按下 Tab 鍵瀏覽你的網站。您可以觸及 網頁上所有的互動控制項?如果不是,建議您使用 tabindex敬上 提升這些控制項的可聚焦性

在頁面層級管理焦點

有時 tabindex 能協助打造流暢的使用者體驗。例如: 如果您建立了一個包含不同內容區段的強大單一網頁, 內容隱藏在網頁載入中的不同時間點。這可能表示 導覽連結會變更顯示的內容,無需重新整理頁面。

在此情況下,請找出所選內容區域,並將 tabindex 設為 -1 並呼叫其 focus 方法。這樣可確保內容不會出現在 建立原始符記的順序此技術稱為「管理焦點」,讓 必須與網站的視覺內容保持同步

管理元件中的焦點

在某些情況下,您還必須在控制層級管理焦點,例如: 自訂元素

要知道應使用哪些鍵盤行為並不容易。 無障礙網際網路應用程式 (ARIA) 編寫 做法 指南中列出元件類型以及可支援的鍵盤動作類型。

在分頁順序中插入元素

使用 tabindex="0" 將元素插入自然的分頁順序。例如:

<div tabindex="0">Focus me with the TAB key</div>

如要聚焦元素,請按下 Tab 鍵或呼叫元素的 focus() 方法。

從分頁順序中移除元素

使用 tabindex="-1" 移除元素。例如:

<button tabindex="-1">Can't reach me with the TAB key!</button>

這樣會從自然的分頁順序移除元素,但元素仍可 則集中於呼叫 focus() 方法。

tabindex="-1" 套用至元素不會影響子項; 可能是否在分頁標籤中自然順序或 tabindex 值 這些素材資源仍會按照分頁的順序顯示。 如要從分頁順序中移除元素及其所有子項,請考慮使用 WICG 的 inert polyfill。 polyfill 會模擬建議 inert 屬性的行為。 來防止輔助技術選取或讀取元素。

建議不要使用 tabindex > 0

任何 tabindex 大於 0 時,都會將元素跳到自然分頁前方 順序。如果 tabindex 大於 0 的元素有多個元素,則分頁 從大於 0 的最低值開始依序排列。

使用大於 0 的 tabindex 屬於反模式,因為 螢幕閱讀器會按 DOM 順序 (而非分頁順序) 來瀏覽頁面。如果 元素顯示在標籤順序中,請移至較早的位置 。

在 Lighthouse 中,您可以使用 tabindex > 識別元素0.執行 無障礙稽核 (Lighthouse > 選項 > 無障礙功能),並找出 「無元素的 [tabindex] 值大於 0」的結果稽核。

使用「核准tabindex」選項

如要建立複雜的元件,你可能需要新增其他鍵盤 但跨越重心請盡可能使用內建的 select 元素。是 可聚焦,且允許使用方向鍵來顯示其他可選取項目 只要設定成「自動重新啟動」 和「在主機維護期間」選項即可

如要在自己的元件中實作類似函式,您可以使用已知技術 「核准 tabindex」。將 Tabindex 允許開啟,將 tabindex 設為 -1。 除了目前處於啟用狀態的子項外。接著,元件會使用鍵盤 事件接聽器,判斷使用者按了哪個鍵。

發生這種情況時,元件會設定先前聚焦子項的 tabindex 設為 -1,將關注焦點的子項 tabindex 設為 0,然後呼叫 focus() 方法。

變更前

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

變更後

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

鍵盤存取方法

如果不確定支援自訂元件的鍵盤層級, 請參閱 ARIA 編寫做法 1.1。 本指南列出了常見的 UI 模式,並找出 元件應支援