aria-valuenow

aria-valuenow 屬性定義了 range 小部件的當前值。

描述

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

在為非語義元素建立範圍型別角色（包括 meter、scrollbar、slider 和 spinbutton）時，aria-valuenow 使得能夠定義最小值和最大值之間的當前數值。最小值和最大值使用 aria-valuemin 和 aria-valuemax 定義。

警告：range 角色本身不應使用，因為它是一個"抽象"角色。aria-valuenow 屬性用於所有範圍角色子型別。

html
<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 元素

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 屬性設定為使滑塊值易於理解的字串，例如 "星期一"。

示例

html
<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 角色、狀態或屬性以使其無障礙，則應使用原生功能。”

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

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

值

<number>

一個小數，介於最小值和最大值之間。

關聯介面

Element.ariaValueNow

ariaValueNow 屬性是 Element 介面的一部分，它反映了 aria-valuenow 屬性的值。

ElementInternals.ariaValueNow

ariaValueNow 屬性是 ElementInternals 介面的一部分，它反映了 aria-valuenow 屬性的值。

關聯角色

用於的角色

繼承到角色

規範

規範
可訪問富網際網路應用程式 (WAI-ARIA)
# aria-valuenow

另請參閱