使用 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 的最低值開始依序排列。使用大於 0 的 Tabindex 會視為反模式。

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

Lighthouse 這類工具可自動偵測特定無障礙功能問題，但仍有部分測試必須由人手動執行。

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

在網頁層級管理焦點

有時 tabindex 能協助打造流暢的使用者體驗。舉例來說，如果您建立包含不同內容區段的完整單頁，其中部分內容會在網頁載入的不同時間點隱藏。這可能表示導覽連結會變更顯示的內容，而不用重新整理頁面。

在這種情況下，請找出所選內容區域，並為其提供 tabindex 的 -1，然後呼叫其 focus 方法。這可確保內容不會顯示在自然分頁順序中。這項稱為「管理焦點」的技術，可以讓使用者理解的背景資訊與網站上的視覺內容保持同步。

管理元件中的焦點

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

要知道要實作哪些鍵盤行為可能很困難。「Accessible Rich Internet Applications (ARIA) Authoring Practices」指南列出元件類型，以及元件支援的鍵盤動作類型。

在分頁順序中插入元素

使用 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

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

如果使用 tabindex 大於 0，系統會視為「反模式」，因為螢幕閱讀器會按照 DOM 順序 (而非分頁順序) 來瀏覽頁面。如果您需要在分頁順序中提早顯示元素，應將該元素移至 DOM 中的較前位置。

您可以使用 Lighthouse 找出 tabindex > 0 的元素。執行無障礙稽核 (Lighthouse > 選項 > 無障礙功能)，然後尋找「No element has [tabindex]值大於 0」的稽核結果。

使用「核准tabindex」選項

如果您正在建構複雜的元件，可能需要在焦點之外新增額外的鍵盤支援。盡可能使用內建的 select 元素。可聚焦，並允許使用方向鍵顯示其他可選選項。

如要在自己的元件中實作類似的函式，您可以使用稱為「流動 tabindex」的技術。流動 tabindex 的運作方式是將 tabindex 設為 -1，除了目前有效的子項以外，所有子項都會設為 -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 模式，並識別元件應支援的按鍵。