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

發布日期：2019 年 5 月 2 日

手動檢查所有自訂控制項是否可透過鍵盤聚焦，並顯示焦點指標。元素焦點的順序應盡量遵循 DOM 順序。 如果不確定哪些元素應接收焦點，請參閱 web.dev 上的「Learn Accessibility」課程中的焦點模組。

如何手動測試

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

您是否能存取網頁上的所有互動式控制項？ 每個互動式控制項上是否有焦點指標？

如何修正

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

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

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

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

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

重要性

對於無法或選擇不使用滑鼠的使用者來說，鍵盤導覽是存取畫面上所有內容的主要方式。如要提供良好的鍵盤體驗，必須有邏輯分明的 Tab 鍵順序和可辨識的焦點樣式。 如果鍵盤使用者無法看到或瞭解焦點所在位置，就無法與網頁互動。

如要進一步瞭解無障礙功能，請參閱「學習無障礙功能」。

資源