標準 HTML 元素 (例如 <button>
或 <input>
) 內建鍵盤存取功能,應盡可能使用這類元素。不過,如果您需要建構自訂互動式元素,可以透過新增 tabindex
來建立預期的使用者行為。
請只在互動式內容中加入 tabindex
。即使內容
例如主要圖片,螢幕閱讀器使用者也能藉此瞭解
正在新增焦點
什麼是 Tabindex?
在某些情況下,您需要修改內建於內建功能提供的預設分頁順序
元素,可以使用 tabindex
HTML 屬性明確設定
。
tabindex
可套用至任何元素,但應僅套用至互動元素,並採用整數值範圍。取代為
tabindex
可以針對可聚焦網頁元素指定明確的順序
在分頁順序中插入其他無法聚焦的元素,然後移除元素
例如:
tabindex="0"
:以自然分頁標籤順序插入元素。元素可以
即可聚焦,而按下 Tab 鍵則可聚焦元素
其 focus()
方法。
tabindex="-1"
:從自然分頁順序移除元素,但元素
但仍可呼叫 focus()
方法
tabindex="5"
:任何大於 0
的 tabindex 都會將該元素置於自然分頁順序的前端。如果有多個元素的 tabindex 大於 0
,則分頁順序會從大於零的最小值開始,然後依序往上。使用大於 0
的 Tabindex 會視為
反模式。
確保可透過鍵盤存取控制選項
Lighthouse 等工具非常適合用來自動偵測特定無障礙設施 不過,部分測試仍必須人工進行。
請嘗試按下 Tab
鍵瀏覽你的網站。您是否可以使用頁面上的所有互動式控制項?如果沒有,您可能需要使用 tabindex
來改善這些控制項的焦點功能。
在網頁層級管理焦點
有時 tabindex
能協助打造流暢的使用者體驗。例如:
如果您建立了一個包含不同內容區段的強大單一網頁,
內容隱藏在網頁載入中的不同時間點。這可能表示
導覽連結會變更顯示的內容,無需重新整理頁面。
在此情況下,請找出所選內容區域,並將 tabindex
設為
-1
並呼叫其 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
任何 tabindex
大於 0 時,都會將元素跳到自然分頁前方
順序。如果有多個元素的 tabindex
大於 0,分頁順序會從大於零的最低值開始,依序往上。
使用大於 0 的 tabindex
屬於反模式,因為
螢幕閱讀器會按 DOM 順序 (而非分頁順序) 來瀏覽頁面。如果
元素顯示在標籤順序中,請移至較早的位置
。
您可以使用 Lighthouse 找出 tabindex
> 0 的元素。執行無障礙稽核 (Lighthouse > 選項 > 無障礙),並查看「No element has a [tabindex]
value greater than 0」稽核結果。
使用「核准tabindex
」選項
如要建立複雜的元件,你可能需要新增其他鍵盤
但跨越重心請盡可能使用內建的 select
元素。是
可聚焦,且允許使用方向鍵來顯示其他可選取項目
只要設定成「自動重新啟動」
和「在主機維護期間」選項即可
如要在自己的元件中實作類似的函式,您可以使用「流動 tabindex
」技術。流動 tabindex 的運作方式是將 tabindex
設為 -1,除了目前有效的子項外,所有子項皆是如此。接著,元件會使用鍵盤事件事件監聽器,判斷使用者按下哪個鍵。
在這種情況下,元件會將先前已聚焦的子項 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 模式,並找出 元件應支援