使用 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.
  • Edge：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，即可使用移動式 tabindex。

<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> 元素，為使用者建立模態視窗，同時封鎖模態視窗外的點擊和分頁。這可讓使用者專注於必要的選項。