键盘可聚焦的滚动条

从 Chrome 124 开始，如果滚动条没有可聚焦的子项，则默认情况下，滚动条可聚焦于键盘。

背景

滚动条无处不在。您可能会在“Terms and Conditions”（条款及条件）框中找到一个案例研究，您需要一直向下滚动并点击“Submit”（提交）按钮。或者，您可能会遇到一个包含可供选择的图标的垂直菜单栏。

在这种情况下，许多 Web 用户会使用鼠标或触控板上下动作来滚动浏览元素。不过，指控设备、触控板或触摸屏并非每位用户浏览页面的最佳方式。有些用户更喜欢在 HTML 网页中导航，而且仅使用键盘访问每个可聚焦的元素。出现这种情况有很多原因。其中包括震颤或其他导致操作鼠标难以操作的用户、难以视觉找到鼠标光标的用户，以及使用单次开关或语音控制的用户。

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

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

在此变更生效之前，用户需聚焦于滚动条

在此变更之前，只有在 tabindex 明确设置为 0 或更高的情况下，滚动条元素才能按 Tab 键聚焦。例如，使用以下 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 所示）将跳过滚动条。

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

请注意，包含可聚焦子项的滚动条已经处于可访问状态（如以下 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 值设置为 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>

借助此功能，无论在什么情况下，滚动条都能默认使用键盘进行访问，这有助于 Web 用户在使用 Tab 键在网页间导航时获得更流畅的体验。