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.