ARIA：滑块角色

slider 角色用于范围输入小部件，用户可以在给定的最小值和最大值之间选择一个值。

ARIA 为开发人员提供了六种不同的范围 小部件角色，包括进度条、仪表和滑块。

progressbar 角色类似于 HTML 的 <progress> 元素，是一个只读范围，指示任务完成的比例，在一个方向上进行，例如文件上传的加载进度条，在完全加载后最终达到 100%。

meter 角色类似于 HTML 的 <meter> 元素，是一个只读量表，指示已知范围内某个事物的数量，例如计算机的电池指示器或汽车的油量表。

slider 角色类似于 HTML 的 input 类型为 range 的元素，<input type="range">，是一个读写输入范围。滑块允许用户在设置的最小值和最大值之间选择一个值。用户通过沿水平或垂直滑块移动滑块滑块来选择一个值，从而选择一个值。

虽然这三种范围都具有相同的 ARIA 状态和属性，但 slider 角色是唯一一个读写范围：它是唯一一个可以通过用户交互更改其值的范围。因此，它必须能够接收焦点。此外，必须支持键盘交互、鼠标点击和触摸交互。

常用属性

aria-valuemin 属性设置最小值。如果省略或不是数字，则默认为 0（零）。

aria-valuemax 属性定义最大值。如果它缺失或不是数字，则默认为 100。

aria-valuenow 属性值必须介于最小值和最大值之间（包含）。此属性对于 slider 和 meter 是必需的，对于 progressbar 是可选的。

对于 slider，除非使用 <input type="range"> 元素，否则当用户更新值时，必须以编程方式更新 aria-valuenow 值。

可选的 aria-valuetext 属性是在 aria-valuenow 数值无法反映滑块的预期值时包含的。由于最小值、最大值和当前值都是数值，当这些数字代表的值不是数值时，应包含 aria-valuetext 属性，并使用一个字符串值来定义数值。例如，如果使用滑块来表示 T 恤尺寸，则当 aria-valuenow 增加时，aria-valuetext 属性应从 xx-small 转换为 XX-large。

当 value 或 aria-valuenow 更新时，aria-valuetext 值必须更新。虽然没有与 <input type="range"> 等效的 HTML 属性，但您可以在任何 <input> 类型上包含 aria-valuetext。ARIA 属性在语义 HTML 元素上受支持。

当 aria-valuetext 是滑块的重要功能时，请考虑使用 <select> 和 <option> 元素。虽然在视觉上不是范围，但每个选项的值对所有用户都更易于访问，而不仅仅是对辅助技术用户的访问。

需要一个可访问的名称。如果范围的角色应用于 HTML <input> 元素（或 <meter> 或 <progress> 元素），则可访问的名称可以来自关联的 <label>。否则，如果存在可见标签，请使用 aria-labelledby；如果不存在可见标签，请使用 aria-label。

在不使用 HTML <input> 元素创建滑块的情况下，请包含 tabindex 属性，使滑块可聚焦。在三种范围类型中，只有 slider 是用户交互式的，因此是唯一一个需要能够接收焦点的类型。焦点应放在滑块滑块上。

滑块有一个隐式 aria-orientation 值为 horizontal。此属性不支持 meter 或 progressbar。

与只读的 meter 和 progressbar 角色不同，slider 是一个输入，接受用户交互。除了包含 tabindex 属性以启用滑块焦点外，还必须实现键盘和指针设备支持。

滑块表示所有可能值的范围。滑块拇指沿滑块的位置表示当前值。必须支持的用户操作包括通过拖动拇指或单击滑块来更改值（对于指向设备）以及使用方向键（例如箭头键）来更改值（对于键盘用户）。请参阅下面的 键盘交互。

多拇指滑块是一个具有两个或多个拇指的滑块，每个拇指在一组相关值中设置一个值。例如，在产品搜索中，可以使用双拇指滑块来使用户能够为搜索设置最小和最大价格限制。

在许多双拇指滑块中，不允许拇指相互穿过，例如当滑块设置范围的最小值和最大值时。例如，在价格范围选择器中，设置范围下限的拇指的最大值受设置范围上限的拇指的当前值限制。上限拇指的最小值也受下限拇指的当前值限制。

多拇指滑块中的拇指是否依赖于其他拇指值不是必需的，但直观的用户体验是必需的，因此建议避免这种反模式。

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

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

<div role="slider"><h3>Temperature in Celsius</h3></div>

由于 slider 的后代是展示性的，因此以下代码是等效的

<div role="slider"><h3 role="presentation">Temperature in Celsius</h3></div>

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

<div role="slider">Temperature in Celsius</div>

aria-valuenow（必需）

设置为介于 aria-valuemin 和 aria-valuemax 之间的十进制值，指示滑块的当前值。

aria-valuetext

辅助技术通常将 aria-valuenow 的值显示为一个数字。如果这不是准确的，请使用 aria-valuetext 为滑块提供一个更易理解的值。

aria-valuemin

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

aria-valuemax

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

aria-label 或 aria-labelledby

定义字符串值或标识为滑块元素提供可访问名称的元素（或元素）。需要一个可访问的名称。

aria-orientation

指示元素的方向是水平、垂直还是未知/不明确。对于滑块，隐式值为 horizontal，但可以设置为 vertical。由于它具有隐式值，因此滑块方向永远不会是模棱两可的。

在下面的示例中，我们创建了一个垂直温度计，用户可以使用它来设置室温

<div>
  <div id="temperatureLabel">Temperature</div>
  <div id="temperatureValue">20°C</div>
  <div id="temperatureSlider">
    <div
      id="temperatureSliderThumb"
      role="slider"
      aria-labelledby="temperatureLabel"
      aria-orientation="vertical"
      tabindex="0"
      aria-valuemin="15.0"
      aria-valuemax="25.0"
      aria-valuenow="20.0"
      aria-valuetext="20 degrees Celsius"
      style="top: calc((25 - 20)*2rem - 0.5rem)"></div>
  </div>
</div>

拇指的位置是最大值减去当前值乘以一度的高度，减去拇指高度的一半以将其居中。其余样式是静态的。

[id="temperatureSlider"] {
  position: relative;
  height: 20rem;
  width: 1rem;
  outline: 1px solid;
  margin: 3rem;
}

[id="temperatureSliderThumb"] {
  position: absolute;
  height: 1rem;
  width: 2rem;
  background-color: currentcolor;
  left: -0.5rem;
}

为了使此示例正常工作，我们必须编写一个脚本来处理所有键盘和指针事件，包括 pointermove、pointerup、focus、blur 和 keydown 的事件监听器，并为默认状态以及拇指和滑块获得焦点时提供样式。拇指的位置、aria-valuenow 和 aria-valuetext 值以及具有 id“temperatureValue” 的元素的内部文本需要在每次 ArrowLeft、ArrowDown、ArrowRight、ArrowUp、Home、End 以及可选的 PageDown 和 PageUp 键释放以及用户拖动拇指或以其他方式单击温度滑块时更新。

使用语义 HTML，这可以写成

<label for="temperature"> Temperature </label>
<output id="temperatureValue">20°C</output>
<input
  type="range"
  id="temperatureSlider"
  min="15"
  max="25"
  step="0.1"
  value="20"
  aria-valuetext="20 degrees celsius"
  style="transform: rotate(-90deg);" />

通过使用 <input>，我们免费获得了一个已经设置样式的范围输入小部件，它具有键盘焦点、焦点样式、键盘交互以及在用户交互时更新的 value。我们仍然需要使用 JavaScript 来更改 aria-valuetext 和 <output> 元素的值。

有几种方法可以使范围输入垂直。在此示例中，我们使用了 CSS 转换。

对于可选的 Page Up 和 Page Down 键，滑块值的更改应大于向上和向下箭头所做的步长更改。

如果滑块描述页面特定区域的加载进度，请包括 aria-describedby 属性以引用滑块状态，并将 aria-busy 属性设置为该区域的 true，直到加载完成。

HTML 的 <input type="range"> 隐式具有 slider 的 role。不要在 <input type="range"> 元素上使用 aria-valuemax 或 aria-valuemin 属性；请改用 min 和 max。否则，任何全局 aria-* 属性以及任何其他适用于滑块角色的 aria-* 属性。

建议使用类型为 range 的本机 <input>，<input type="range">，而不是 slider 角色。

• <input type="range">,
• HTML <progress> 元素
• HTML <meter> 元素
• 其他范围小部件包括
  • meter
  • scrollbar
  • separator（如果可聚焦）
  • progressbar
  • spinbutton
• 工作示例
  • 水平多拇指滑块
  • 水平滑块
  • 带有 aria-orientation 和 aria-valuetext 的滑块