互動式控制項是可透過鍵盤聚焦

手動確認所有自訂控制項都可透過鍵盤聚焦,並顯示焦點指標。元素聚焦的順序應符合 DOM 順序。若您不確定應聚焦哪些元素,請參閱焦點簡介

如何手動測試

如要測試自訂控制項是否可聚焦並顯示焦點指標,請先瀏覽網站。使用 TAB (或 SHIFT + TAB) 在控制項之間移動,並使用方向鍵和 ENTERSPACE 操控其值 (另請參閱「鍵盤存取基礎知識」):

您是否能找到網頁中所有的互動控制項? 每項互動控制項都有一個聚焦指標嗎?

如何修正

如果您無法瀏覽頁面上的所有元素,您可能需要使用 tabindex 來改善這些控制項的可聚焦性。

如要將自訂控制項設為可聚焦,請使用 tabindex="0",在自然的分頁順序中插入自訂控制項元素 (另請參閱「使用 Tabindex 控制焦點」)。例如:

<div tabindex="0">Focus me with the TAB key</div>

您可能還需要在自訂控制項元素中加入適當的 ARIA 角色。詳情請參閱「自訂控制項具有 ARIA 角色」一節。

如果沒有看到焦點指標,建議您使用 :focus 來一律顯示焦點指標。無論您使用滑鼠或鍵盤定位滑鼠或鍵盤,按鈕的焦點指標一律會外觀相同 (另請參閱樣式焦點一節)。

這些資訊的重要性

對於無法或選擇不使用滑鼠的使用者,鍵盤導覽是存取畫面上所有內容的主要方式。良好的鍵盤體驗取決於邏輯分頁順序和容易辨識的焦點樣式。 如果鍵盤使用者看不到焦點所在,就無法與網頁互動。

詳情請參閱如何進行無障礙審查

資源