使用 Tab 鍵控制焦點

Rob Dodson
Alexandra Klepper
Alexandra Klepper
X GitHub LinkedIn

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

瀏覽器支援

  • Chrome：1.
  • Edge：12。
  • Firefox：1.5。
  • Safari：3.1。

資料來源

請只在互動式內容中加入 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 有助於打造流暢的使用者體驗。舉例來說，如果您建立包含不同內容區段的完整單頁，其中部分內容會在網頁載入的不同時間點隱藏。這可能表示導覽連結會變更可見的內容，而不需要重新整理網頁。

在這種情況下，請找出所選內容區域，並為其提供 -1 的 tabindex，然後呼叫其 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，分頁順序會從大於零的最低值開始，依序往上。

使用大於 0 的 tabindex 會被視為反模式，因為螢幕閱讀器會以 DOM 順序瀏覽網頁，而非分頁順序。如果您需要在分頁順序中提早顯示元素，應將該元素移至 DOM 中較早的位置。

您可以使用 Lighthouse 找出 tabindex > 0 的元素。執行無障礙稽核 (Lighthouse > 選項 > 無障礙)，並查看「No element has a [tabindex] value greater than 0」稽核結果。

使用「roving 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 模式，並指出元件應支援哪些鍵。