使用 Tabindex

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney
Rob Dodson
Alexandra Klepper
Alexandra Klepper
X GitHub LinkedIn

語意 HTML 元素的 DOM 位置提供的預設分頁順序相當方便，但有時您可能需要修改分頁順序。在 HTML 中移動元素是理想做法，但可能無法實現。在這種情況下，您可以使用 tabindex HTML 屬性來明確設定元素的分頁位置。

瀏覽器支援

  • Chrome：1.
  • 邊緣：12。
  • Firefox：1.5。
  • Safari：3.1。

資料來源

tabindex 可套用至任何元素，但不一定對每個元素都實用，且會採用整數值範圍。您可以使用 tabindex 為可聚焦的頁面元素指定明確順序、在分頁順序中插入原本無法聚焦的元素，以及從分頁順序中移除元素。例如：

tabindex="0"：將元素插入自然分頁順序。您可以按下 Tab 鍵，將焦點放在元素上，也可以呼叫元素的 focus() 方法，將焦點放在元素上。

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

tabindex="5"：任何大於 0 的 tabindex 都會將該元素置於自然分頁順序的前端。如果有多個元素的 tabindex 大於 0，則分頁順序會從大於零的最小值開始，然後依序往上。

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

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

在網頁層級管理焦點

有時，tabindex 是提供流暢使用者體驗的必要條件。舉例來說，如果您建立包含不同內容區段的完整單頁，且並非所有內容都會同時顯示，這可能表示導覽連結會變更可見的內容，而不需要重新整理網頁。

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

管理元件中的焦點

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

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

要知道應使用哪些鍵盤行為並不容易。「Accessible Rich Internet Applications (ARIA) Authoring Practices」指南列出元件類型，以及元件支援的鍵盤動作類型。

您可能正在處理類似於一組圓形按鈕的自訂元素，但外觀和行為方面有您獨特的想法。

<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 設為 -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>

當使用者抵達最後一個 (或第一個，取決於他們移動焦點的方向) 子項時，焦點會循環回第一個 (或最後一個) 子項。

請試試以下範例。在 DevTools 中檢查元素，觀察 tabindex 從一個圓形按鈕移動到下一個。

強制回應和鍵盤陷阱

請盡量避免手動管理焦點，因為這可能會導致複雜的情況。舉例來說，某個自動完成小工具會嘗試管理焦點並擷取分頁行為，但會禁止使用者離開，直到完成為止。這稱為鍵盤陷阱，可能會讓使用者感到非常不便。

WCAG 的第 2.1.2 節指出，鍵盤焦點不得鎖定或卡在特定頁面元素。使用者應該可以只使用鍵盤，前往及離開所有頁面元素。

但模式視窗是例外狀況。不過，建立互動視窗時，應避免使用 tabindex。使用 inert 可確保使用者不會不小心與元素互動 (故意鍵盤陷阱)。請使用系統預設使用的 <dialog> 元素為使用者建立互動視窗，同時封鎖互動模式外的點擊和分頁。這可讓使用者專注於必要的選項。