tabindex
可套用至任何元素，但並非每個元素都適用，且可接受一系列整數值。使用
tabindex
，您可以為可聚焦的網頁元素指定明確順序、在 Tab 鍵順序中插入原本無法聚焦的元素，以及從 Tab 鍵順序中移除元素。例如：
tabindex="0"
：將元素插入自然索引標籤順序。按下
Tab
即可將焦點放在元素上，呼叫元素的
focus()
方法也能達到相同效果。
tabindex="-1"
：從自然分頁順序中移除元素，但仍可呼叫元素的
focus()
方法來聚焦元素。
tabindex="5"
：任何大於
0
的 tabindex 都會將該元素帶到自然 Tab 順序的前方。如果有多個元素的 tabindex 大於
0
，則 Tab 鍵順序會從大於零的最低值開始，然後依序遞增。
警告：
一般來說，請避免使用正數的索引標籤。中斷正常的焦點順序可能會讓使用者感到困惑和不滿。因此很可能導致
成功標準 2.4.3
失敗。
尤其是標題、圖片或文章標題等非輸入元素，更是如此。如有可能，最好安排原始碼，讓 DOM 序列提供邏輯索引標籤順序。如果使用
tabindex
，請將其限制為自訂互動式控制項，例如按鈕、分頁、下拉式選單和文字欄位；也就是使用者可能會預期要輸入內容的元素。
請只在互動式內容中加入
tabindex
。即使內容很重要 (例如主要圖片)，螢幕閱讀器使用者也能在不新增焦點的情況下瞭解內容。
在頁面層級管理焦點
有時，
tabindex
是提供流暢使用者體驗的必要條件。舉例來說，如果您建構功能強大的單一網頁，其中包含不同的內容區塊，但並非所有內容都會同時顯示，這可能表示導覽連結會變更顯示內容，但不會重新整理網頁。
在此情況下，請找出所選內容區域，並將其
tabindex
設為
-1
，然後呼叫其
focus
方法。這可確保內容不會出現在自然分頁順序中。這項技術稱為「管理焦點」
，可讓使用者感受到的脈絡與網站的視覺內容保持同步。
管理元件中的焦點
在某些情況下，您也必須在控制項層級管理焦點，例如使用自訂元件時。
注意：
盡可能使用語意式 HTML，不要建構自訂元件。
舉例來說，
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>
當使用者抵達最後一個 (或第一個，視移動焦點的方向而定) 子項時，焦點會迴圈回到第一個 (或最後一個) 子項。
請參考以下範例。在開發人員工具中檢查元素，觀察 tabindex 從一個單選按鈕移至下一個單選按鈕。
最好避免手動管理焦點，因為這可能會導致複雜的情況。
舉例來說，自動完成小工具會嘗試管理焦點並擷取 Tab 鍵行為，但會禁止使用者離開小工具，直到完成為止。這就是所謂的「鍵盤陷阱」，可能會讓使用者感到非常沮喪。
WCAG 2.1.2 節指出，鍵盤焦點絕不應鎖定或停留在特定頁面元素 。
使用者應能只用鍵盤瀏覽所有頁面元素。
這項規則的例外狀況是強制回應視窗。不過，建立模式時仍應避免使用 tabindex。使用 inert<dialog>
除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權 ，程式碼範例則為阿帕契 2.0 授權 。詳情請參閱《Google Developers 網站政策 》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間：2024-06-07 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2024-06-07 (世界標準時間)。"],[],[]]
