使用 Tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

由語意 HTML 元素的 DOM 位置提供的預設分頁順序為 但有時您可能需要修改分頁順序。移動 為理想狀態，但並非可行。在這些情況下，您必須 可以使用 tabindex HTML 屬性明確設定元素的分頁 位置。

tabindex 可套用至任何元素，但不一定 且需要特定範圍的整數值。取代為 tabindex 可以針對可聚焦網頁元素指定明確的順序 在分頁順序中插入其他無法聚焦的元素，然後移除元素 例如：

tabindex="0"：以自然分頁標籤順序插入元素。元素可以 即可聚焦，而按下 Tab 鍵則可聚焦元素 其 focus() 方法。

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

tabindex="5"：任何大於 0 的 Tabindex 都會讓該元素出現在最前面 會與自然標籤順序排列如果有多個元素的 Tabindex 值較大 大於 0，分頁順序會從大於 0 的最低值開始 並向上擴充

這對非輸入元素 (例如標題、圖片或文章) 來說特別重要 標題建議您盡可能排列原始程式碼，讓 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>

使用者到達最後一個位置 (或使用者抵達最後一個線時，視他們移動的方向而定) 正在移動焦點) 子項，焦點則會繞回第一個 (或最後一個) 孩子。

請參考以下範例。檢查 使用開發人員工具觀察分頁索引從一個無線電移至下一個無線電的位置。

強制回應和鍵盤陷阱

建議避免手動管理焦點，因為這麼做可能會導致複雜情況。 例如嘗試管理焦點和擷取的自動完成小工具 分頁行為，但會防止使用者離開分頁，直到作業完成為止。 這就是所謂的鍵盤陷阱，可能會讓使用者感到困擾。

WCAG 第 2.1.2 節規定，鍵盤焦點不可鎖定， 疊放於某個特定網頁元素。 使用者應該能夠只使用 鍵盤。

這項規則的例外是強制回應。不過，建議您避免使用 tabindex (建立互動視窗時)。有了 inert，你可以： 防止使用者意外與元素互動 (刻意 。使用 <dialog> 元素 (預設為獨立狀態)，可在 互動模式外的點擊和分頁這樣一來，使用者就能專心 必填。