键盘可聚焦的滚动条

从 Chrome 130 开始，如果滚动条没有可通过键盘聚焦的子项，则默认可通过键盘聚焦。

背景

滚动条无处不在。您可能会在“条款及条件”框中找到此信息，您需要滚动到底部才能点击提交按钮。或者，您 则可能会遇到 满是图标的垂直菜单栏以供选择

在这种情况下，许多网络用户会使用鼠标或 使用触控板滚动浏览该元素。不过，定点设备、触控板或 触摸屏并非每位用户浏览网页的最佳方式。部分人员 用户更喜欢在 HTML 网页中导航，并使用 仅键盘。造成这种情况的原因有很多。来自 手震或其他导致难以操控鼠标的问题； 而其他使用单个字符的单个用户， 开关或语音控制

无障碍功能最佳实践建议，所有功能都必须使用 一个键盘。这样，每个人都可以以最适合自己的方式使用网络。

2.1.1 键盘：内容的所有功能均可通过键盘界面操作，而无需为各个按键操作指定特定时间，但以下情况除外：底层功能需要的输入取决于用户移动的路径，而不仅仅是端点。（第 A 级）

在进行此项变更之前让焦点位于滚动条中

在此项变更之前，仅当 tabindex 具有 Tab 键时，滚动条元素才能通过 Tab 键聚焦。 明确设置为 0 或更高。例如，使用以下 CSS 和 HTML。然后，尝试使用 Tab 键从第一个按钮切换到滚动条元素。

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 中的负 Tabindex 值，滚动条将 已跳过。

<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。

此功能可让滚动条在所有情况下都默认支持键盘操作，这有助于网页用户在使用标签页浏览网页时获得更顺畅的体验。