鍵盤可聚焦捲動器

從 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 為正值，捲軸可聚焦。

使用負 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。

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