ARIA: 滑塊（slider）角色

描述

slider 角色用於範圍輸入微件，使用者可以從給定的最小值和最大值中選擇一個值。

slider 角色與其他範圍選項的比較

ARIA 為開發者提供了六種不同的範圍微件角色，包括 progressbar、meter 和 slider。

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-valuenow 的數值不能反映滑塊的預期值時，會包含可選的 aria-valuetext 屬性。由於最小值、最大值和當前值都是數字，當這些數字代表的值不是數字時，應包含 aria-valuetext 屬性，其字串值定義了該數值。例如，如果使用滑塊來表示 T 恤尺碼，則當 aria-valuenow 增加時，aria-valuetext 屬性應從 xx-small 變為 XX-large。

aria-valuetext 值必須隨著 value 或 aria-valuenow 的更新而更新。雖然 <input type="range"> 沒有等效的 HTML 屬性，但您可以在任何 <input> 型別中包含 aria-valuetext。ARIA 屬性在語義 HTML 元素上受支援。

當 aria-valuetext 是滑塊的重要功能時，請考慮改用帶有 <option> 元素的 <select>。雖然在視覺上不是一個範圍，但每個選項的值對所有使用者都更易訪問，而不僅僅是輔助技術使用者。

可訪問名稱是必需的。如果範圍的角色應用於 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>

關聯的 WAI-ARIA 角色、狀態和屬性

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。由於它有隱式值，因此滑塊方向永遠不會模糊。

鍵盤互動

對於可選的 Page Up 和 Page Down 鍵，滑塊值的變化量應大於上下箭頭鍵所做的步長變化。

示例

在下面的示例中，我們建立了一個垂直溫度計，使用者可以使用它來設定室溫

<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 的事件監聽器，並提供預設狀態以及當滑塊拇指和滑塊獲得焦點時的樣式。每次釋放 ArrowLeft、ArrowDown、ArrowRight、ArrowUp、Home、End 以及可選的 PageDown 和 PageUp 鍵時，以及當用戶拖動滑塊拇指或以其他方式單擊溫度滑塊時，滑塊拇指的位置、aria-valuenow 和 aria-valuetext 值以及具有 id "temperatureValue" 的元素的內部文字都需要更新。

使用語義 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" />

#temperatureSlider {
  transform: rotate(-90deg);
}

透過使用 <input>，我們可以免費獲得一個已經樣式化的範圍輸入微件，它具有鍵盤焦點、焦點樣式、鍵盤互動以及使用者互動時更新的 value。我們仍然需要使用 JavaScript 來更改 aria-valuetext 和 <output> 元素的值。

有幾種方法可以使範圍輸入垂直。在這個例子中，我們使用了 CSS 轉換。

最佳實踐

如果滑塊描述了頁面特定區域的載入進度，請包含 aria-describedby 屬性以引用滑塊狀態，並將該區域的 aria-busy 屬性設定為 true，直到載入完成。

HTML 的 <input type="range"> 隱式具有 slider 的 role。不要在 <input type="range"> 元素上使用 aria-valuemax 或 aria-valuemin 屬性；請改用 min 和 max。否則，任何全域性 aria-* 屬性和適用於滑塊角色的其他 aria-* 屬性。

優先使用 HTML

建議使用型別為 range 的原生 <input> 元素，即 <input type="range">，而不是 slider 角色。

規範

另見

• <input type="range">,
• HTML <progress> 元素
• HTML <meter> 元素
• 其他範圍小部件包括
  • meter
  • scrollbar
  • separator (如果可聚焦)
  • progressbar
  • spinbutton
• W3C WAI-ARIA 實踐示例
  • 水平多滑塊滑塊
  • 顏色檢視器滑塊
  • 評級滑塊
  • 媒體搜尋滑塊
  • 垂直溫度滑塊