此页面由 Cloud Translation API 翻译。

键盘可聚焦的滚动条

从 Chrome 124 开始，如果滚动条没有键盘可聚焦子项。

背景

滚动条无处不在。您可能会在方框您需要向下滚动至此处并点击“提交”按钮或者，您则可能会遇到满是图标的垂直菜单栏以供选择

在这种情况下，许多网络用户会使用鼠标或使用触控板滚动浏览该元素。不过，定点设备、触控板或触摸屏并非每位用户浏览网页的最佳方式。部分人员用户更喜欢在 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 124 及以上版本

此功能允许使用未设置 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 或可聚焦子项，但仍可聚焦。

请注意，仅当滚动条没有可聚焦的子项时，才会发生此行为。例如，如果滚动条已包含按钮，则标签页焦点将您可以跳过滚动条，直接将焦点放在按钮上。在本示例中，滚动条用户已能使用箭头键访问内容，重点。由于存在此规则，默认设置可能并不总是最佳方式。如果您希望滚动条元素本身在这种情况下，应该通过键盘来聚焦，那么我们建议您设置一个 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。

借助此功能，在所有情况下，滚动条在默认情况下都能通过键盘使用，这将有助于 Web 用户在标签页导航时获得更流畅的体验网页。