使用 Tab 鍵控制焦點

Rob Dodson

Alexandra Klepper

標準 HTML 元素 (例如 <button> 或 <input>) 內建鍵盤存取功能，應盡可能使用這類元素。不過，如果您需要建構自訂互動式元素，可以透過新增 tabindex 來建立預期的使用者行為。

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

什麼是 Tabindex？

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

tabindex 可套用至任何元素，但應僅套用至互動元素，並採用整數值範圍。取代為 tabindex 可以針對可聚焦網頁元素指定明確的順序 在分頁順序中插入其他無法聚焦的元素，然後移除元素 例如：

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

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

tabindex="5"：任何大於 0 的 tabindex 都會將該元素置於自然分頁順序的前端。如果有多個元素的 tabindex 大於 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 的 tabindex 屬於反模式，因為 螢幕閱讀器會按 DOM 順序 (而非分頁順序) 來瀏覽頁面。如果 元素顯示在標籤順序中，請移至較早的位置 。

您可以使用 Lighthouse 找出 tabindex > 0 的元素。執行無障礙稽核 (Lighthouse > 選項 > 無障礙)，並查看「No element has a [tabindex] value greater than 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 模式，並找出 元件應支援