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

另请参阅