tabindex 是HTML 中控制元素能否通過(guò)鍵盤(pán)tab 鍵聚焦及順序的關(guān)鍵屬性。其核心作用體現(xiàn)在：1. tabindex="0" 使元素可聚焦並按DOM 自然順序參與tab 導(dǎo)航；2. tabindex="-1" 元素不能tab 聚焦但可通過(guò)JavaScript 方法聚焦；3. 正整數(shù)的tabindex 雖可定義順序但不推薦使用以免引起混亂。正確應(yīng)用包括在自定義組件中為交互元素添加tabindex，如給div 或span 添加tabindex="0" 實(shí)現(xiàn)聚焦能力。同時(shí)需注意避免濫用tabindex="0" 或強(qiáng)制排序?qū)е虏槐匾膖ab 停留點(diǎn)和邏輯混亂。複雜UI 組件中常結(jié)合ARIA 屬性提升無(wú)障礙體驗(yàn)，如role 和aria-label 配合tabindex="0" 確保圖標(biāo)按鈕的可訪問(wèn)性。總之，只在必要時(shí)手動(dòng)添加tabindex，優(yōu)先保持默認(rèn)順序或通過(guò)CSS 和DOM 結(jié)構(gòu)調(diào)整佈局以實(shí)現(xiàn)最佳用戶體驗(yàn)和無(wú)障礙支持。

網(wǎng)頁(yè)開(kāi)發(fā)中，良好的鍵盤(pán)導(dǎo)航體驗(yàn)對(duì)無(wú)障礙訪問(wèn)和用戶體驗(yàn)都非常重要。 tabindex是HTML 中控制元素能否通過(guò)鍵盤(pán)tab 鍵聚焦的關(guān)鍵屬性。合理使用它，可以讓頁(yè)面在不依賴鼠標(biāo)的情況下也能順暢操作。

什麼是tabindex ？

tabindex屬性決定了一個(gè)元素是否可以通過(guò)鍵盤(pán)的Tab 鍵獲得焦點(diǎn)，以及它的聚焦順序。默認(rèn)情況下，並非所有元素都能被tab 到，比如<div> 、 <code><span></span>等結(jié)構(gòu)標(biāo)籤，除非你主動(dòng)給它們加上tabindex 。

• tabindex="0" ：元素可以被聚焦，並且按照DOM 的自然順序參與tab 導(dǎo)航。
• tabindex="-1" ：元素不能通過(guò)tab 鍵聚焦，但可以通過(guò)JavaScript 調(diào)用.focus()方法來(lái)聚焦。
• tabindex="任意正整數(shù)" ：元素可以被聚焦，且tab 順序由數(shù)值大小決定，數(shù)字越小越靠前。但這個(gè)用法不推薦，容易引起混亂。

如何正確使用tabindex提升可訪問(wèn)性

在構(gòu)建自定義組件時(shí)（比如按鈕、下拉菜單），我們經(jīng)常需要讓一些原本不可聚焦的元素具備tab 焦點(diǎn)能力。例如：

 <div tabindex="0">這是一個(gè)可聚焦的div</div>

這樣用戶就可以用Tab 鍵聚焦到這個(gè)div 上了。不過(guò)需要注意：

• 不要濫用tabindex="0" ，只給真正需要交互的元素添加。
• 如果是純展示內(nèi)容，不要加tabindex ，否則會(huì)干擾屏幕閱讀器用戶的操作。

對(duì)於組件化開(kāi)發(fā)來(lái)說(shuō)，比如React 或Vue 中封裝的按鈕或切換面板，記得為交互區(qū)域添加合適的tabindex ，確保鍵盤(pán)用戶也能正常使用。

避免常見(jiàn)的陷阱

有時(shí)候開(kāi)發(fā)者為了“讓某個(gè)元素能被聚焦”，直接給它加個(gè)tabindex="0" ，卻忽略了實(shí)際用途。這會(huì)導(dǎo)致幾個(gè)問(wèn)題：

• 頁(yè)面中出現(xiàn)大量不必要的tab 停留點(diǎn)，影響效率。
• 屏幕閱讀器朗讀的內(nèi)容變得冗長(zhǎng)，用戶分不清重點(diǎn)。
• 使用tabindex="1" 、 tabindex="2"這種方式強(qiáng)行改變tab 順序，可能會(huì)打亂頁(yè)面原有的邏輯，尤其在多語(yǔ)言或多佈局場(chǎng)景下更易出錯(cuò)。

所以建議：

• 盡量保持默認(rèn)的tab 順序。
• 只有當(dāng)原生語(yǔ)義標(biāo)籤（如<button> 、 <a> ）無(wú)法滿足需求時(shí)，才考慮手動(dòng)添加tabindex 。
• 如果必須設(shè)置tab 順序，優(yōu)先用CSS 的order屬性或調(diào)整DOM 結(jié)構(gòu)，而不是用tabindex強(qiáng)行排序。

在復(fù)雜組件中靈活應(yīng)用

在實(shí)現(xiàn)一些複雜的UI 組件時(shí)，比如選項(xiàng)卡（Tab）、彈窗（Modal）或樹(shù)形菜單（Tree Menu）， tabindex常常配合ARIA 屬性一起使用，以保證鍵盤(pán)和輔助技術(shù)的兼容性。

舉個(gè)例子，一個(gè)可點(diǎn)擊的圖標(biāo)按鈕可能長(zhǎng)這樣：

 <span role="button" tabindex="0" aria-label="關(guān)閉">×</span>

這裡我們用了：

• role="button"來(lái)表明它的功能。
• tabindex="0"讓它可以被tab 聚焦。
• aria-label說(shuō)明了它的行為，方便屏幕閱讀器識(shí)別。

這種組合方式在沒(méi)有原生按鈕可用時(shí)非常實(shí)用，但也要注意測(cè)試其行為是否符合預(yù)期。

基本上就這些。合理使用tabindex並不是特別複雜，但很容易忽略細(xì)節(jié)。只要記?。翰皇撬性囟夹枰猼ab 焦點(diǎn)，只有那些需要用戶交互的部分才應(yīng)該加入進(jìn)來(lái)。