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 的滑塊