使用 Tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

語意 HTML 元素 DOM 位置提供的預設索引標籤順序很方便，但有時您可能需要修改索引標籤順序。在 HTML 中移動元素是理想做法，但可能不可行。在這些情況下，您可以使用 tabindex HTML 屬性，明確設定元素的索引標籤位置。

tabindex 可套用至任何元素，但並非每個元素都適用，且可接受一系列整數值。使用 tabindex，您可以為可聚焦的網頁元素指定明確順序、在 Tab 鍵順序中插入原本無法聚焦的元素，以及從 Tab 鍵順序中移除元素。例如：

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

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

tabindex="5"：任何大於 0 的 tabindex 都會將該元素帶到自然 Tab 順序的前方。如果有多個元素的 tabindex 大於 0，則 Tab 鍵順序會從大於零的最低值開始，然後依序遞增。

尤其是標題、圖片或文章標題等非輸入元素，更是如此。如有可能，最好安排原始碼，讓 DOM 序列提供邏輯索引標籤順序。如果使用 tabindex，請將其限制為自訂互動式控制項，例如按鈕、分頁、下拉式選單和文字欄位；也就是使用者可能會預期要輸入內容的元素。

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

在頁面層級管理焦點

有時，tabindex 是提供流暢使用者體驗的必要條件。舉例來說，如果您建構功能強大的單一網頁，其中包含不同的內容區塊，但並非所有內容都會同時顯示，這可能表示導覽連結會變更顯示內容，但不會重新整理網頁。

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

管理元件中的焦點

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

舉例來說，select 元素可以接收基本焦點，但您可以使用方向鍵顯示其他可選取的選項。如果您建構自訂 select 元素，請務必複製該行為，讓鍵盤使用者仍可與控制項互動。

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

您可能正在開發類似一組圓形按鈕的自訂元素，但外觀和行為都獨一無二。

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

如要判斷需要哪些鍵盤支援，請參閱 ARIA 撰寫實務指南。第 2 節包含設計模式清單，包括單選按鈕群組的特徵表，以及與新元素最相符的現有元件。

其中一個應支援的常見鍵盤行為是上/下/左/右方向鍵。如要為新元件新增這項行為，請使用稱為「漫遊 tabindex」的技術。

漫遊 tabindex 的運作方式是將目前活動子項以外的所有子項 tabindex 設為 -1。

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

這個元件會使用鍵盤事件監聽器判斷使用者按下的按鍵；發生這種情況時，元件會將先前焦點子項的 tabindex 設為 -1，將要成為焦點的子項 tabindex 設為 0，並呼叫該子項的焦點方法。

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

當使用者抵達最後一個 (或第一個，視移動焦點的方向而定) 子項時，焦點會迴圈回到第一個 (或最後一個) 子項。

請參考以下範例。在開發人員工具中檢查元素，觀察 tabindex 從一個單選按鈕移至下一個單選按鈕。

強制回應視窗和鍵盤陷阱

最好避免手動管理焦點，因為這可能會導致複雜的情況。 舉例來說，自動完成小工具會嘗試管理焦點並擷取 Tab 鍵行為，但會禁止使用者離開小工具，直到完成為止。這就是所謂的「鍵盤陷阱」，可能會讓使用者感到非常沮喪。

WCAG 2.1.2 節指出，鍵盤焦點絕不應鎖定或停留在特定頁面元素。 使用者應能只用鍵盤瀏覽所有頁面元素。

這項規則的例外狀況是強制回應視窗。不過，建立模式時仍應避免使用 tabindex。使用 inert，您可以確保使用者不會意外與元素互動 (刻意設定的鍵盤陷阱)。使用預設為惰性的 <dialog> 元素，為使用者建立模式，同時封鎖模式外的點擊和分頁標籤。讓使用者專注於必要選項。