使用 Tabindex

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

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

在這種情況下,請找出所選內容區域,並為其提供 -1tabindex,然後呼叫其 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> 元素,為使用者建立模態視窗,同時封鎖模態視窗外的點擊和分頁。這可讓使用者專注於必要的選項。