本頁面由 Cloud Translation API 翻譯而成。

使用 Tab 鍵控制焦點

Rob Dodson

Alexandra Klepper

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

瀏覽器支援

資料來源

請只在互動式內容中加入 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 屬性的行為。來防止輔助技術選取或讀取元素。

注意： inert polyfill 屬於實驗性質，在所有情況下可能無法正常運作。請先謹慎測試，再於正式環境中使用。

建議不要使用 `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 模式，並找出元件應支援