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

手動檢查所有自訂控制項是否可聚焦，並顯示焦點指標。元素的聚焦順序應以 DOM 順序為目標。如果不確定哪些元素應接收焦點，請參閱 web.dev 的學習無障礙課程中的焦點模組。

如何手動測試

如要測試自訂控制項是否可供焦，並顯示焦點指標，請先在網站中按下 Tab 鍵。使用 TAB (或 SHIFT + TAB) 在控制項之間移動，並使用方向鍵和 ENTER 和 SPACE 操作其值 (另請參閱「鍵盤存取功能的基礎知識」)：

您是否可以使用頁面上的所有互動式控制項？ 每個互動式控制項是否都有聚焦指標？

如何修正

如果您無法透過 Tab 鍵瀏覽網頁上的所有元素，可能需要使用 tabindex 來改善這些控制項的焦點功能。

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

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

您可能也需要在自訂控制項元素中新增適當的 ARIA 角色。請參閱「自訂控制項具有 ARIA 角色」。

如果您沒有看到焦點指標，建議您使用 :focus 一律顯示焦點指標。無論您是使用滑鼠還是鍵盤切換至該按鈕，按鈕的焦點指標一律會顯示相同的樣式 (另請參閱「樣式焦點」)。

重要性

對於無法或選擇不使用滑鼠的使用者，鍵盤導覽是瀏覽螢幕上所有內容的主要方式。良好的鍵盤體驗取決於分頁邏輯順序和可辨別的焦點樣式。如果鍵盤使用者無法查看或瞭解焦點所在位置，就無法與網頁互動。

詳情請參閱「如何進行無障礙功能審查」。

資源