<button>
或 <input>
等標準 HTML 元素已內建免費的鍵盤無障礙功能。不過,如果您要建構「自訂」互動元件,請使用 tabindex
屬性確保這些元件可透過鍵盤存取。
檢查控制項是否可用鍵盤
Lighthouse 等工具非常適合用於偵測某些無障礙功能問題,但有些功能只能由真人測試。
請嘗試按下 Tab
鍵瀏覽您的網站。是否能存取網頁上的所有互動控制項?如果不行,您可能需要使用 tabindex
來改善這些控制項的可聚焦性。
在分頁順序中插入元素
使用 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 順序瀏覽頁面,而非分頁順序。如果您希望某個元素較早依分頁順序顯示,則應將該元素移至 DOM 中較早的位置。
Lighthouse 可讓你輕鬆識別 tabindex
> 0 的元素。執行無障礙功能稽核 (Lighthouse > 選項 > 無障礙),然後尋找「No Element has a [tabindex] 值大於 0」的稽核結果。
建立「核准 tabindex
」的可存取元件
如果您要建構複雜的元件,可能需要除了焦點外,新增其他鍵盤支援。考量內建的 select
元素。可聚焦的項目,您可以使用方向鍵顯示其他功能 (可選取的選項)。
如要在自己的元件中實作類似功能,請使用「核准 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>
待辦事項:DevSite - 思考和檢查評量
鍵盤按鍵操作選項
如果您不確定自訂元件可能需要哪一種鍵盤支援,請參閱 ARIA 編寫做法 1.1。這份實用的指南列出常見的 UI 模式,並指出元件應支援的鍵。