鍵盤可聚焦捲動器

從 Chrome 130 開始，如果捲軸沒有可透過鍵盤聚焦的子項，則預設可透過鍵盤聚焦。

背景

捲動畫面是無所不在的。您可能會在「條款及細則」方塊中找到一個，需要向下捲動畫面才能點選提交按鈕。或者，您可能會看到垂直的選單列，列出可供選擇的圖示。

這種情況下，許多網路使用者會使用滑鼠或觸控板的向上動作，捲動元素。然而，指標裝置、觸控板或觸控螢幕並非每個使用者瀏覽頁面的最佳方式。有些人偏好只使用鍵盤，在 HTML 頁面中瀏覽並存取所有可聚焦的元素。這可能是出於多種原因。包括有震顫症或其他導致難以操作滑鼠的問題使用者、視覺上難以找到滑鼠游標的使用者，以及使用單一切換鈕或語音控制的使用者。

無障礙功能最佳做法建議，所有功能都必須透過鍵盤提供。如此一來，每個人都能以最適合的方式使用網路。

2.1.1 鍵盤：所有內容的功能都可以透過鍵盤介面操作，不需要為個別按鍵輸入特定時間，但如果基礎函式需要輸入內容取決於使用者移動路徑，而非端點，則不在此限。(A 級)

在變更前，捲軸的焦點

在這項變更之前，只有在 tabindex 明確設為 0 以上時，捲動器元素才能獲得分頁焦點。例如，使用下列 CSS 和 HTML。接著，請嘗試從第一個按鈕切換至捲軸元素。

div.scroll, button {
  border: 1px solid lightgray;
  margin-top: 1em;
  border-radius: 0.5em;
}

div.scroll {
  overflow: auto;
  width: 20em;
  height: 5em;
  display: block;
}
div.long {
  width: 10em;
  height: 10em;
}

<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>
分頁索引為正值，因此可聚焦。

使用負 tabindex (如以下 HTML 所示) 時，系統會略過捲軸。

<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
由於 tabindex 為負值，因此系統會略過捲軸。

如果您未設定 tabindex 值，使用者可能會很難透過順序焦點導覽來存取捲軸。這可能會讓無法存取滑鼠的使用者感到困擾。

<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
捲動器沒有 Tabindex。

請注意，包含可聚焦子項的捲軸 (如以下 HTML 所示) 已可供存取，因為在聚焦可聚焦子項時，可使用方向鍵捲動。在這種情況下，系統不會變更任何行為。

<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
由於含有可聚焦的子項，因此捲動器可聚焦。

從 Chrome 130 開始，可聚焦捲軸

這項功能可讓沒有 tabindex 值設定且沒有任何可聚焦子項的捲軸，可透過鍵盤聚焦。這樣一來，無法或選擇不使用滑鼠的使用者，就能使用鍵盤的 Tab 鍵和方向鍵聚焦內容。

<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>
捲動器沒有 Tabindex，或可聚焦的子項仍可聚焦。

請注意，只有在捲軸沒有可聚焦子項時，才會發生這項行為。舉例來說，如果捲軸已有按鈕，Tab 鍵焦點會略過捲軸，直接將焦點移至按鈕。在這種情況下，只要在按鈕聚焦後，就能使用方向鍵存取捲動器內容。因此，如果有此類子項，預設值可能不會以最佳方式運作。如果您希望捲軸元素本身在這種情況下可透過鍵盤聚焦，建議您將 tabindex 值設為 0 以上。

<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
捲動器的 Tabindex 為 0。

這項功能可讓捲動器在所有情況下預設為可透過鍵盤存取，有助於網頁使用者在瀏覽網頁時，透過分頁瀏覽功能獲得更流暢的體驗。