鍵盤可聚焦捲動器

從 Chrome 130 版開始，如果捲動器沒有可聚焦的箭頭，即可使用鍵盤聚焦 可聚焦的子項。

背景

捲動器無所不在，您可能會在「條款及細則」中找到方塊 請向下捲動到最後，再點選提交按鈕或者，您 就會看到一列垂直選單列可供選擇的圖示。

這種情況下，許多網路使用者會用滑鼠或點選下移動作 可捲動瀏覽元素。不過，這指的是指針裝置、觸控板 觸控螢幕並非每位使用者的最佳瀏覽方式。部分使用者 偏好在可存取所有可聚焦元素的 HTML 網頁中瀏覽 只需要鍵盤有很多原因可能會造成這種情況。來自符合下列條件的使用者： 悲劇事件或其他導致滑鼠難以操作的問題 無法在視覺上定位滑鼠遊標，其他使用單一遊標的人 切換或語音控制。

無障礙功能最佳做法建議，如要使用所有功能，都必須採用 也能使用鍵盤輸入功能如此一來，所有人都能以最符合需求的方式使用網路 。

2.1.1 鍵盤：全部 功能 可以透過 鍵盤介面 而不需針對個別按鍵動作設定特定時間，但 基礎函式需要輸入，而這取決於使用者的路徑 不只是端點(第 A 級)

，瞭解如何調查及移除這項存取權。

進行這項變更前，焦點移至捲動器

在這項變更之前，捲軸元素只有在分頁索引時才能聚焦 明確設為 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>
敬上
捲動器沒有 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>
敬上
捲動器沒有定位點索引或可聚焦的子項，但仍可聚焦。

請注意，只有在捲動器沒有可聚焦的子項時，才會發生此行為。 舉例來說，如果捲動器已包含按鈕，則分頁焦點會 略過捲動器，直接將焦點移至按鈕。在這個例子中 點選按鈕，就能利用方向鍵存取內容 焦點。基於這項規則，預設有時不一定能正常執行 取得最佳效果如果您希望捲動器元素本身 在這種情況下，建議您設定分頁索引 值等於或大於 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。

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