ARIA: aria-valuenow 屬性

描述

aria-valuenow 屬性定義了範圍小部件的當前值。它類似於 <progress>、<meter> 和型別為 range、number 以及所有日期時間型別的 <input> 的 value 屬性。

建立範圍型別角色時，包括 meter、scrollbar、slider 和 spinbutton，在非語義元素上，aria-valuenow 可以定義介於最小值和最大值之間的當前數值。最小值和最大值使用 aria-valuemin 和 aria-valuemax 定義。

<p id="birthyearLabel">What year were you born?</p>
<div
  role="spinbutton"
  tabindex="-1"
  aria-valuenow="1984"
  aria-valuemin="1900"
  aria-valuemax="2021"
  aria-labelledby="birthyearLabel">
  <span class="value"> 1984 </span>
  <span role="button">
    <span aria-hidden="true">+</span>
    Increment year by 1
  </span>
  <span role="button">
    <span aria-hidden="true">-</span>
    Decrement year by 1
  </span>
</div>

如果可以，請使用語義 HTML 元素

<label for="birthyear">What year were you born?</label>
<input type="number" id="birthyear" value="1984" min="1900" max="2021" />

如果沒有已知值，例如當進度條處於不確定狀態時，請勿設定 aria-valuenow 屬性。

當未設定 aria-valuenow 時，不隱含關於當前值的資訊。

與滑塊和旋轉按鈕一起使用時，輔助技術會向用戶播報實際值。

與進度條和捲軸一起使用時，輔助技術會將值以百分比的形式播報給使用者。當定義了 aria-valuemin 和 aria-valuemax 時，百分比值會計算為範圍上的位置。否則，實際值會以百分比形式播報。

當要播報的值（實際值或百分比值）可能對使用者不清晰時，應使用 aria-valuetext 屬性來提供值的使用者友好表示。設定後，將播報 valuetext 字串而不是 valuenow 數值。例如，如果一個滑塊代表一週中的幾天，那麼這一天的 aria-valuenow 是一個數字，那麼 aria-valuetext 屬性應設定為一個使滑塊值可理解的字串，例如“星期一”。

示例

<p id="temperatureLabel">Oven Temperature</p>
<div
  role="meter"
  id="temperature"
  aria-valuenow="205"
  aria-valuemin="70"
  aria-valuemax="250"
  aria-labelledby="temperatureLabel">
  <div class="meter-color" aria-hidden="true"></div>
</div>

ARIA 使用的第一條規則是：“如果你可以使用原生功能，並且其語義和行為已按要求內建，而不是透過修改元素並新增 ARIA 角色、狀態或屬性使其可訪問，那麼就應該這樣做。”

<label for="temperature">Oven Temperature</label>
<input type="range" id="temperature" value="205" min="70" max="250" step="5" />

如果我們使用原生的 HTML 語義和 <input>，我們可以免費獲得樣式和語義。

值

<number>

一個介於最小值和最大值之間的十進位制數字。

相關介面

Element.ariaValueNow

Element 介面的 ariaValueNow 屬性反映了 aria-valuenow 屬性的值。

ElementInternals.ariaValueNow

ElementInternals 介面的 ariaValueNow 屬性反映了 aria-valuenow 屬性的值。

相關角色

用於角色

• meter
• scrollbar
• separator
• slider
• spinbutton

繼承到角色

• meter
• progressbar
• scrollbar
• slider
• spinbutton

規範

另見

• range 角色
• <input type="range> 元素的 value 屬性
• aria-valuetext
• aria-valuemax
• aria-valuemin.