標準 HTML 元素 (例如 <button> 或 <input>) 內建無障礙功能，應盡可能使用。不過，如果您需要建構自訂互動元素，可以新增 tabindex 來建立預期的使用者行為。
請只在互動式內容中加入 tabindex。即使內容很重要 (例如索引鍵圖片)，螢幕閱讀器使用者在不加入焦點的情況下也能理解內容。
什麼是 Tabindex？
有時您需要修改內建元素提供的預設分頁順序，可以使用 tabindex HTML 屬性明確設定元素的分頁位置。
tabindex 可套用至任何元素，但此屬性只能套用至互動式元素，且接受特定範圍的整數值。使用 tabindex 時，您可以為可聚焦頁面元素指定明確順序、在分頁順序中插入其他無法聚焦的元素，並從分頁順序移除元素。例如：
tabindex="0"：以自然分頁標籤順序插入元素。按下 Tab 鍵即可聚焦元素，呼叫元素的 focus() 方法則可聚焦該元素。
tabindex="-1"：從自然分頁順序中移除元素，但呼叫元素的 focus() 方法仍可聚焦該元素
tabindex="5"：任何大於 0 的 Tabindex 都會讓元素顯示在自然分頁順序的前面。如果有多個元素的 Tabindex 大於 0，分頁順序就會從大於 0 的最低值開始依序排列。使用大於 0 的 Tabindex 會視為反模式。
確保可透過鍵盤存取控制選項
Lighthouse 這類工具很適合用來自動偵測特定無障礙功能問題，但部分測試仍須由真人手動執行。
請嘗試按下 Tab 鍵瀏覽你的網站。請問您是否能存取
頁面上所有的互動控制項？否則，您可能需要使用 tabindex 改善這些控制項的可聚焦性。
在頁面層級管理焦點
有時 tabindex 能協助打造流暢的使用者體驗。舉例來說，如果您建構包含不同內容區段的完善單一網頁，某些內容會在網頁載入的不同時間點隱藏。這可能表示導覽連結會變更顯示的內容，而不用重新整理頁面。
在這種情況下，請找出所選內容區域，並提供 -1 的 tabindex，然後呼叫其 focus 方法。這可確保內容不會以自然的分頁順序顯示。這項稱為「管理焦點」的技術，可以讓使用者理解的背景資訊與網站上的視覺內容保持同步。
管理元件中的焦點
在某些情況下，您也必須在控制層級管理焦點，例如使用自訂元素。
要知道應使用哪些鍵盤行為並不容易。無障礙網際網路應用程式 (ARIA) 編寫做法指南會列出元件類型，以及元件支援哪些鍵盤動作。
在分頁順序中插入元素
使用 tabindex="0" 將元素插入自然的分頁順序。例如：
<div tabindex="0">Focus me with the TAB key</div>
如要聚焦元素，請按下 Tab 鍵或呼叫元素的 focus() 方法。
從分頁順序中移除元素
使用 tabindex="-1" 移除元素。例如：
<button tabindex="-1">Can't reach me with the TAB key!</button>
這樣會從自然分頁的順序移除元素，但仍可呼叫元素的 focus() 方法，將元素聚焦於焦點。
將 tabindex="-1" 套用至元素不會影響子項；如果這些元素在分頁標籤中自然順序，或因 tabindex 值而產生，它們仍會按照分頁順序排列。如要將元素及其所有子項從分頁標籤順序中移除，請考慮使用 WICG 的 inert polyfill。polyfill 會模擬建議 inert 屬性的行為，防止輔助技術選取或讀取元素。
建議不要使用 tabindex > 0
任何大於 0 的 tabindex 都會將元素跳到自然分頁順序的正面。如果有多個元素的 tabindex 大於 0，分頁順序會從大於 0 的最低值開始依序排列。
如果使用 tabindex 大於 0，系統會視為「反模式」，因為螢幕閱讀器會按照 DOM 順序 (而非分頁順序) 來瀏覽頁面。如果需要在分頁順序中更早顯示元素，則應將元素移至 DOM 中較早的位置。
使用 Lighthouse 時，您可以識別 tabindex > 0 的元素。執行無障礙稽核 (Lighthouse > 選項 > 無障礙功能)，然後尋找「No element has [tabindex]值大於 0」的稽核結果。
使用「核准tabindex」選項
如要建構複雜的元件，可能需加入焦點以外的其他鍵盤支援。請盡可能使用內建的 select 元素。可聚焦，且允許使用方向鍵顯示其他可選取的選項。
如要在自己的元件中實作類似函式，您可以使用「核准 tabindex」技巧。除了目前使用中的子項，請將 tabindex 設為 -1，以使用 Roving tabindex。然後，這個元件會使用鍵盤事件監聽器判斷使用者按了哪個鍵。
如果發生這種情況，元件會將先前聚焦子項的 tabindex 設為 -1、將聚焦子項的 tabindex 設為 0，並對其呼叫 focus() 方法。
使用前
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="0">Redo</button>
<button tabindex="-1">Cut</button>
</div>
使用後
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="-1">Redo</button>
<button tabindex="0">Cut</button>
</div>
鍵盤存取方法
如果不確定自訂元件可能需要哪個層級的鍵盤支援，請參閱 ARIA 編寫做法 1.1。本指南列出了常見的 UI 模式，並識別元件應支援的按鍵。