由語意 HTML 元素的 DOM 位置提供的預設分頁順序雖然較為方便，但有時可能需要修改分頁順序。理想情況下，建議您在 HTML 中移動元素，但這可能不可行。在這種情況下，您可以使用 tabindex HTML 屬性來明確設定元素的分頁位置。
tabindex 可以套用至任何元素，但不一定每個元素都相當實用，且接受特定範圍的整數值。使用 tabindex 時，您可以為可聚焦頁面元素指定明確順序、在分頁順序中插入其他無法聚焦的元素，並從分頁順序移除元素。例如：
tabindex="0"：以自然分頁標籤順序插入元素。按下 Tab 鍵即可聚焦元素，呼叫元素的 focus() 方法則可聚焦該元素。
tabindex="-1"：從自然分頁順序中移除元素，但呼叫元素的 focus() 方法仍可聚焦該元素
tabindex="5"：任何大於 0 的 Tabindex 都會讓元素顯示在自然分頁順序的前面。如果有多個元素的 Tabindex 大於 0，分頁順序就會從大於 0 的最低值開始依序排列。使用大於 0 的 Tabindex 會視為反模式。
這對非輸入元素 (例如標頭、圖片或文章標題) 來說尤其重要。建議您盡可能排列原始碼，讓 DOM 序列提供邏輯分頁順序。如果您使用 tabindex，請將其限制為自訂互動控制項，例如按鈕、分頁、下拉式選單和文字欄位，也就是使用者預期提供輸入內容的元素。
請只在互動式內容中加入 tabindex。即使內容重要 (例如索引鍵圖片)，螢幕閱讀器使用者也能在不新增焦點的情況下理解內容。
在頁面層級管理焦點
有時需要 tabindex 才能提供流暢的使用者體驗。例如，如果您建立包含不同內容區段的完善單一網頁，但是並非所有內容都能夠同時顯示。這可能表示導覽連結不會重新整理網頁，而會變更顯示的內容。
在這種情況下，請找出所選內容區域，並提供 -1 的 tabindex，然後呼叫其 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 設為 -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> 元素為使用者建立互動視窗，同時封鎖互動模式外的點擊和分頁。這可讓使用者將焦點放在所需的選項。