ARIA：滚动条角色

scrollbar 是一个范围，用于控制视窗内容的哪一部分当前在视窗框架中可见；无论视窗是全浏览器大小、iframe 还是任何元素的 块级格式化上下文。

许多应用程序在内容区域大于应用程序窗口时提供原生滚动条。滚动条通常出现在查看区域的右侧或底部。原生滚动条显示为薄的矩形轨道区域，与它控制的视窗的长度相同，有一个名为“滑块”或“滚动器”的 UI 部分，可以沿轨道拖动以移动视窗中关联的内容。某些滚动条在轨道的两端都有箭头，当激活时，这些箭头允许视窗滚动一小段距离。

以本文档为例：如果视窗是全浏览器窗口，而内容的高度超过了视窗的高度，那么在大多数浏览器中，窗口右侧边缘的滚动条代表页面的总长度，滚动滑块代表当前位于视窗中的页面内容部分。

滚动条也可能出现在全浏览器窗口的子部分视窗上。继续以本文档为例，如果该内容嵌入在 <iframe> 或 <object> 中，则原生垂直滚动条将与框架的高度相同。滚动条的长度通常与视窗的长度相同，但并非必须如此。

如果你当前没有看到滚动条，可能是因为你的浏览器只在滚动时或元素的内容太大而无法在其块级格式化上下文中完全显示时才会显示滚动条。根据浏览器和操作系统的不同，即使内容在视窗中完全显示，且无需或不能滚动，也可以使滚动条始终可见。

始终最好使用原生滚动条。你可以使用 CSS overflow 属性来确保原生滚动条的显示。一个 CSS 滚动条规范 正在开发中。一些浏览器允许 通过带前缀的伪元素样式化滚动条。

由于原生滚动条样式化在历史上一直受到限制，你可能会遇到用 JavaScript 实现的滚动条，你需要支持它并使其完全可访问。为此，你可以使用 scrollbar 角色来告知辅助技术一个 UI 控件是一个交互式滚动条。

具有 scrollbar 角色的元素是一个图形对象，用于控制查看区域内内容的滚动；它是 ARIA 角色，指示一个元素是一个滚动条。与之最相似的 HTML 元素是 range <input> 类型，<input type="range">。

scrollbar 元素有两个必需的属性：aria-controls 和 aria-valuenow。aria-controls 属性引用它控制的可滚动区域的 id。aria-valuenow 属性定义滚动条的当前值。

虽然 aria-valuenow 始终是必需的，但 aria-valuemin 和 aria-valuemax 属性仅在 scrollbar 的最小值不为 0 或最大值不为 100 时需要为滚动条角色设置。aria-valuenow 的值必须始终介于最小值和最大值之间（包括最小值和最大值），或者在最小值和最大值分别默认值为 0 和 100 时，介于 0 和 100 之间（包括 0 和 100）。aria-valuenow 表示视窗距离文档底部有多远。把它想象成进度条，文档的开头是最小值，文档的结尾是最大值。

scrollbar 通过滚动条的大小和滑块相对于其控制的方向（水平或垂直）的可见范围的位置来表示当前值和可能值的范围。 换句话说，scrollbar 的长度（高度或宽度）代表视窗内所有内容。 aria-valuemin 值代表内容和滚动条的开始位置，aria-valuemax 值代表内容和滚动条的结束位置。 aria-valuenow 代表当前在视窗中可见的内容以及可移动滑块的当前位置或值。 aria-valuenow 值通常会由辅助技术作为 aria-valuemin 和 aria-valuemax 之间的百分比来呈现。

与本机滚动条类似，用户可以使用鼠标、触控板、键盘和语音输入直接或间接与 scrollbar 元素交互。 scrollbar 角色实现也必须适应所有这些交互方法。

使用鼠标时，用户必须能够通过单击滚动条两端（如果有）的滚动箭头、单击滚动轨道上的空部分以及单击并拖动滚动滑块来激活 scrollbar。

也必须支持键盘滚动。 当焦点位于由 scrollbar 控制的视窗内时，上箭头 和 下箭头（或水平滚动条的 左箭头 和 右箭头）应该按比例移动滚动条滑块。 此外，Page Up、Page Down、Space 和 Shift + Space 键必须将内容和滚动滑块移动一个视窗的高度（或宽度），直到内容的底部或顶部（或左侧或右侧）处于可见状态。

必须使用 JavaScript 将 scrollbar 操作转换为滚动命令，并通过以下方式向用户提供反馈：

1. 直观地更新 scrollbar 元素，
2. 滚动视窗的内容，以及
3. 更新 aria-valuenow 属性值。

scrollbar 角色的默认方向为垂直方向。 在这种情况下，包含 aria-orientation="vertical" 是可选的。 方向表示滚动条的方向以及滚动条控制的查看区域的滚动效果。 如果滚动方向是从左到右或从右到左，而不是从上到下，则在具有 scrollbar 角色的元素上包含 aria-orientation="horizontal"。

有些类型的用户界面组件在平台可访问性 API 中表示时，只能包含文本。 可访问性 API 没有办法表示 scrollbar 中包含的语义元素。 为了解决此限制，浏览器会自动将角色 presentation 应用于任何 scrollbar 元素的所有后代元素，因为它是一个不支持语义子元素的角色。

例如，考虑以下包含标题的 scrollbar 元素。

<div role="scrollbar"><h3>Title of my scrollbar</h3></div>

由于 scrollbar 的后代是表现性的，因此以下代码是等效的

<div role="scrollbar"><h3 role="presentation">Title of my scrollbar</h3></div>

从辅助技术用户的角度来看，标题不存在，因为前面的代码片段在 可访问性树 中等效于以下内容

<div role="scrollbar">Title of my scrollbar</div>

aria-controls （必需）

通过 id 标识由滚动条控制的内容的视窗。

aria-valuenow （必需）

设置为 0 或（如果存在）aria-valuemin 和 aria-valuemax 之间的十进制值，表示滚动条的当前值。

aria-valuetext

辅助技术通常会将 aria-valuenow 的值呈现为百分比。 如果这没有帮助，请使用此属性使滚动条值对用户更易于理解。

aria-valuemin

设置为表示最小值的十进制值，小于 aria-valuemax。 如果不存在，则默认值为 0。

aria-valuemax

设置为表示最大值的十进制值，大于 aria-valuemin。 如果不存在，则默认值为 100。

aria-labelledby

当不使用本机表单控件，因此无法将滚动条与 <label> 关联时，如果存在可提供所需可访问名称的可见文本，则设置为包含用作标签的文本的元素的 id。 否则，请使用 aria-label。

aria-label

如果无法使用 <label>，并且不存在可以由 aria-labelledby 引用可见文本，则提供为 scrollbar 元素提供所需可访问名称的字符串值。

aria-orientation

默认情况下，方向为 vertical。 该属性可以包含并设置为 horizontal、undefined（所有角色的默认值，除非另有说明）或 vertical。

上箭头

视窗中的内容向上移动一行，滑块按比例向上移动滚动条滑块，直到内容和滚动条的顶部到达为止。

下箭头

视窗中的内容向下移动一行，滑块按比例向下移动滚动条滑块，直到内容和滚动条的底部到达为止。

左箭头

水平滚动时，视窗中的内容向左移动一个字符的宽度，滑块按比例向左移动滚动条滑块，直到内容的左边缘与视窗的左端对齐，滑块与滚动条的左端对齐。

右箭头

水平滚动时，视窗中的内容向右移动一个字符的宽度，滑块按比例向右移动滚动条滑块，直到内容的右边缘与视窗的右端对齐，滑块与滚动条的右端对齐。

Page Up 和 Shift + Space

视窗中的内容向上移动一个视窗的高度，滑块按比例向上移动滚动条滑块，直到内容和滚动条的顶部到达为止。

Page Down 和 Space

视窗中的内容向下移动一个视窗的高度，滑块按比例向下移动滚动条滑块，直到内容的底部和滚动条的底部到达为止。内容的底部或顶部处于可见状态。

以下是一个单词可能太长而无法放入父容器中的示例。

<span id="pi-label">Pi</div>
<div id="pi">
3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679
</div>
<div
  role="scrollbar"
  aria-labelledby="pi-label"
  aria-controls="pi"
  aria-orientation="horizontal"
  aria-valuenow="0"
  aria-valuemin="0"
  aria-valuemax="100">
  <div id="thumb"></div>
</div>

当使用 ARIA 角色而不是本机 UI 功能时，必须使用 CSS 来设置滚动条和滑块的样式，并且必须使用 JavaScript 来处理所有键盘和指针事件。

可以使用 CSS 来确保 PI 的溢出值具有本机滚动条

<h3 id="PI">Pi</h3>
<p class="pi" tabindex="0" aria-labelledby="PI">
  3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679
</p>

.pi {
  overflow: auto;
  max-width: 100%;
}

上面的 CSS 意味着当用户与段落的视窗交互时，如果段落中最长单词的长度大于包含段落的框，则将出现本机滚动条。 添加了 tabindex 属性以允许使用键盘的人员导航到溢出内容并滚动其周围。

• <input type="range">,
• HTML <progress> 元素
• HTML <meter> 元素
• 其他范围小部件包括
  • meter
  • slider
  • separator （如果可获得焦点）
  • progressbar
  • spinbutton
• 文档 scroll 事件