使用 Tab 鍵控制焦點

Rob Dodson

Alexandra Klepper

<button> 或 <input> 等標準 HTML 元素內建鍵盤無障礙功能，應盡可能使用。不過，如果您需要建構自訂互動式元素，可以新增 tabindex 來建立預期使用者行為。

請只在互動式內容中加入 tabindex。即使內容很重要 (例如主要圖片)，螢幕閱讀器使用者也能在不新增焦點的情況下瞭解內容。

什麼是 tabindex？

如要修改內建元素提供的預設分頁順序，可以使用 tabindex HTML 屬性，明確設定元素的分頁位置。

tabindex 可套用至任何元素，但應僅套用至互動式元素，並採用一系列整數值。使用 tabindex，您可以為可聚焦的網頁元素指定明確順序、在 Tab 鍵順序中插入原本無法聚焦的元素，以及從 Tab 鍵順序中移除元素。例如：

tabindex="0"：將元素插入自然索引標籤順序。按下 Tab 即可將焦點放在元素上，呼叫元素的 focus() 方法也能達到相同效果。

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

tabindex="5"：任何大於 0 的 tabindex 都會將該元素帶到自然 Tab 順序的前方。如果有多個元素的 tabindex 大於 0，則 Tab 鍵順序會從大於零的最低值開始，然後依序往上。使用大於 0 的 tabindex 會被視為反模式。

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

Lighthouse 等工具很適合自動偵測特定無障礙功能問題，但部分測試仍須由專人手動進行。

請嘗試按 Tab 鍵瀏覽網站。你是否可以存取頁面上的所有互動式控制項？如果沒有，您可能需要使用 tabindex 改善這些控制項的可聚焦性。

在頁面層級管理焦點

有時，tabindex有助於打造流暢的使用者體驗。舉例來說，如果您建構的單一網頁包含不同內容區塊，且部分內容會在網頁載入期間的不同時間點隱藏，這可能表示導覽連結會變更可見內容，但不會重新整理網頁。

在此情況下，請找出所選內容區域，並將其 tabindex 設為 -1，然後呼叫其 focus 方法。這可確保內容不會出現在自然分頁順序中。這項技術稱為「管理焦點」，可讓使用者感受到的脈絡與網站的視覺內容保持同步。

管理元件中的焦點

在某些情況下，您也必須在控制項層級管理焦點，例如使用自訂元素。

要瞭解該實作哪些鍵盤行為可能很困難。《無障礙網頁應用程式 (ARIA) 撰寫實務》指南列出元件類型，以及支援的鍵盤動作。

在索引標籤順序中插入元素

使用 tabindex="0" 將元素插入自然索引標籤順序。例如：

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

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

從 Tab 鍵順序中移除元素

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

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

這會從自然分頁順序中移除元素，但元素仍可透過呼叫其 focus() 方法來聚焦。

對元素套用 tabindex="-1" 不會影響其子項；如果子項自然位於 Tab 鍵順序中，或因為 tabindex 值而位於 Tab 鍵順序中，則會保留在 Tab 鍵順序中。如要從索引標籤順序中移除元素及其所有子項，請考慮使用 WICG 的 inert polyfill。這個 Polyfill 會模擬建議的 inert 屬性行為，防止元素遭到選取或由輔助技術讀取。

建議不要使用 tabindex > 0

任何大於 0 的 tabindex 值都會將元素跳轉至自然分頁順序的前端。如果有多個元素的 tabindex 大於 0，則分頁順序會從大於零的最低值開始，然後依序往上。

使用大於 0 的 tabindex 視為反模式，因為螢幕閱讀器會依 DOM 順序 (而非 Tab 鍵順序) 瀏覽網頁。如要讓元素在索引標籤順序中提早出現，應將元素移至 DOM 中較早的位置。

使用 Lighthouse，您可以找出 tabindex > 0 的元素。執行無障礙稽核 (依序點選「Lighthouse」>「Options」>「Accessibility」)，然後查看「所有元素的 [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 Authoring Practices 1.1。本指南列出常見的 UI 模式，並指出元件應支援哪些鍵。