tabindex

基線 廣泛可用

此功能已得到良好建立,並在許多裝置和瀏覽器版本中執行良好。它自 2018 年 10 月.

報告反饋

試一試

tabindex 全域性屬性 允許開發者使 HTML 元素可聚焦,允許或阻止它們按順序可聚焦(通常使用 Tab 鍵,因此得名),並確定它們按順序聚焦導航的相對順序。

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

  • 負值(確切的負值實際上並不重要,通常是 tabindex="-1")表示該元素無法透過順序鍵盤導航訪問。

    注意:tabindex="-1" 可能對那些不應使用 Tab 鍵直接導航,但需要將鍵盤焦點設定為它們的元素有用。例如,一個螢幕外模態視窗,當它進入檢視時應該被聚焦,或者一個當錯誤的表單提交時應該立即被聚焦的表單提交錯誤訊息。

  • tabindex="0" 表示該元素在順序鍵盤導航中應該是可聚焦的,在任何正的 tabindex 值之後。這些元素的焦點導航順序由它們在文件源中的順序定義。
  • 正值 表示該元素應該在順序鍵盤導航中是可聚焦的,其順序由數字的值定義。也就是說,tabindex="4"tabindex="5"tabindex="0" 之前聚焦,但在 tabindex="3" 之後聚焦。如果多個元素共享相同的正 tabindex 值,它們彼此之間的順序遵循它們在文件源中的位置。tabindex 的最大值為 32767。
  • 如果 tabindex 屬性包含,但沒有設定值,那麼元素是否可聚焦由使用者代理決定。

    警告:建議您僅使用 0-1 作為 tabindex 值。避免使用大於 0tabindex 值和可以更改可聚焦 HTML 元素順序的 CSS 屬性(Ordering flex items)。這樣做會使依賴鍵盤導航或輔助技術的使用者難以導航和操作頁面內容。相反,請按照邏輯順序編寫文件中的元素。

一些可聚焦的 HTML 元素預設情況下具有 0tabindex 值,由 使用者代理 在後臺設定。這些元素是具有 href 屬性的 <a><area><button><frame> 已棄用 <iframe><input><object><select><textarea>,以及 SVG <a> 元素,或者為 <details> 元素提供摘要的 <summary> 元素。開發人員不應該在這些元素中新增 tabindex 屬性,除非它改變了預設行為(例如,包括一個負值將從焦點導航順序中刪除該元素)。

警告:tabindex 屬性不能用於 <dialog> 元素。

無障礙問題

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

使用非互動式元素創作的互動式元件未列在 輔助功能樹 中。這會阻止輔助技術能夠導航到這些元件並操作它們。內容應該使用互動式元素(<a><button><details><input><select><textarea> 等)進行語義描述。這些元素具有內建的角色和狀態,這些角色和狀態向輔助功能傳達狀態,否則必須透過 ARIA 管理。

規範

規範
HTML 標準
# attr-tabindex

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱