使用 Tab 鍵控制焦點

Rob Dodson

<button> 或 <input> 等標準 HTML 元素已內建免費的鍵盤無障礙功能。不過，如果您要建構「自訂」互動元件，請使用 tabindex 屬性確保這些元件可透過鍵盤存取。

檢查控制項是否可用鍵盤

Lighthouse 等工具非常適合用於偵測某些無障礙功能問題，但有些功能只能由真人測試。

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

在分頁順序中插入元素

使用 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 順序瀏覽頁面，而非分頁順序。如果您希望某個元素較早依分頁順序顯示，則應將該元素移至 DOM 中較早的位置。

Lighthouse 可讓你輕鬆識別 tabindex > 0 的元素。執行無障礙功能稽核 (Lighthouse > 選項 > 無障礙)，然後尋找「No Element has a [tabindex] 值大於 0」的稽核結果。

建立「核准 tabindex」的可存取元件

如果您要建構複雜的元件，可能需要除了焦點外，新增其他鍵盤支援。考量內建的 select 元素。可聚焦的項目，您可以使用方向鍵顯示其他功能 (可選取的選項)。

如要在自己的元件中實作類似功能，請使用「核准 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 模式，並指出元件應支援的鍵。