鍵盤可聚焦捲動器

自 Chrome 124 版起，如果捲動器沒有鍵盤可聚焦子項，則根據預設，可聚焦於鍵盤。

背景

捲動器隨處可見，您可能會在「條款及細則」方塊中看到這類警告，需要一直向下捲動到這裡，才能點選「提交」按鈕。或者，您可能會看到垂直選單列有許多圖示可供選擇。

在這類情況下，許多網頁使用者會使用滑鼠或觸控板的向上動作來捲動元素。但是，指標裝置、觸控板或觸控螢幕並非每位使用者的最佳瀏覽方式。有些人偏好只用鍵盤瀏覽 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>
因正的分頁索引使捲動器可聚焦。

如下列 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 值，使用者可能會難以使用序列焦點導覽功能存取捲軸。對於無法存取滑鼠的使用者來說 這會是很令人失望的事

<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>
捲軸沒有 Tab 索引。

請注意，由於下列 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 124 版起，具備可聚焦捲動工具

這項功能可讓沒有設定 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>
捲軸沒有任何分頁索引或可聚焦的子項，但仍然可聚焦。

請注意，只有在捲軸不含可聚焦子項時，系統才會執行此行為。舉例來說，如果捲軸已包含按鈕，分頁焦點就會略過捲動器，直接聚焦按鈕。在此情況下，只要在聚焦的按鈕上，即可使用方向鍵存取捲軸內容。基於這個規則，如果這類子項存在，預設行為不一定是最佳行為。在這種情況下，如果您想讓捲動器元素本身成為可聚焦鍵盤的項目，建議您將 Tab 鍵索引值設為 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>
捲軸的定位索引為 0。

這項功能在所有情況下，預設都能使用捲動器，讓網頁使用者在瀏覽分頁時享有更流暢的體驗。