键盘可聚焦的滚动条

从 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 或可聚焦子项,但仍可聚焦。

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