HTML tabindex 全域性屬性

試一試

<p>Click anywhere in this pane, then try tabbing through the elements.</p>

<label>First in tab order:<input type="text" /></label>

<div tabindex="0">Tabbable due to tabindex.</div>

<div>Not tabbable: no tabindex.</div>

<label>Third in tab order:<input type="text" /></label>

p {
  font-style: italic;
  font-weight: bold;
}

div,
label {
  display: block;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

div:focus {
  font-weight: bold;
}

它接受一個整數作為值，根據整數值的不同而產生不同的結果。

• 負值（具體的負值無關緊要，通常為 tabindex="-1"）表示該元素不能透過順序鍵盤導航訪問。

  注意：tabindex="-1" 對於不應透過 Tab 鍵直接導航，但需要設定鍵盤焦點的元素可能很有用。例如，當一個螢幕外的模態窗口出現時應該被聚焦，或者當一個錯誤的表單提交時，錯誤訊息應該立即被聚焦。

• tabindex="0" 表示該元素應該在任何正 tabindex 值之後，在順序鍵盤導航中可聚焦。這些元素的焦點導航順序由它們在文件源中的順序決定。

• 正值表示該元素應該在順序鍵盤導航中可聚焦，其順序由數字值決定。也就是說，tabindex="4" 在 tabindex="5" 和 tabindex="0" 之前聚焦，但在 tabindex="3" 之後聚焦。如果多個元素共享相同的正 tabindex 值，則它們之間的相對順序遵循它們在文件源中的位置。tabindex 的最大值為 32767。

• 如果包含 tabindex 屬性但未設定值，則元素是否可聚焦由使用者代理決定。

  警告：建議僅使用 0 和 -1 作為 tabindex 值。避免使用大於 0 的 tabindex 值和可以改變可聚焦 HTML 元素順序的 CSS 屬性（彈性專案排序）。這樣做會使依賴鍵盤導航或輔助技術的人難以導航和操作頁面內容。相反，請以邏輯順序編寫文件中的元素。

一些可聚焦的 HTML 元素在底層由 使用者代理 預設設定 tabindex 值為 0。這些元素包括帶有 href 屬性的 <a> 或 <area>、<button>、<frame> 已廢棄 、<iframe>、<input>、<object>、<select>、<textarea>，以及 SVG <a> 元素，或者為 <details> 元素提供摘要的 <summary> 元素。除非改變預設行為（例如，包含負值將從焦點導航順序中移除該元素），否則開發者不應向這些元素新增 tabindex 屬性。

可訪問性考慮

避免將 tabindex 屬性與非互動式內容結合使用，以使某些旨在互動的內容可以透過鍵盤輸入進行聚焦。例如，使用 <div> 元素來描述按鈕，而不是 <button> 元素。

使用非互動式元素編寫的互動式元件不會列在可訪問性樹中。這會阻止輔助技術導航和操作這些元件。內容應使用互動式元素（<a>、<button>、<details>、<input>、<select>、<textarea> 等）進行語義描述。這些元素具有內建的角色和狀態，可以將狀態傳達給輔助技術，否則這些狀態必須透過 ARIA 進行管理。

• 使用 tabindex 屬性 | The Paciello Group

規範

瀏覽器相容性

另見

• 所有全域性屬性
• HTMLElement.tabIndex 反映此屬性
• tabindex 的可訪問性問題：請參閱 Adrian Roselli 的不要使用大於 0 的 Tabindex
• 閱讀順序