aria-valuenow

使用时机

适用于任何表示范围内某个值的自定义小部件：role="slider"、role="progressbar"、role="spinbutton"、role="scrollbar"。该属性承载当前数值。几乎总是与 aria-valuemin 和 aria-valuemax 配合使用，三者共同让辅助技术计算并宣告百分比与绝对值。

通常无需在原生的 <input type="range"> 或 <progress> 上使用——浏览器会自动公开其值。仅在用自定义标记构建小部件时才使用 aria-valuenow。

行为说明

该值为数字（整数或浮点数）。辅助技术将其宣告为小部件的当前位置，通常还附带在最小–最大范围内的百分比：“音量，滑块，10 中的 7，70 百分比。”

若小部件的值作为标签比作为数字更有意义——日期选择器滑块上的*“星期五”，三档选择器上的”中”*——则通过 aria-valuetext 提供人类可读的标签。辅助技术将以 aria-valuetext 代替 aria-valuenow 朗读，而忽略 valuetext 的辅助技术仍有数字作为备用。务必同时设置两者。

对于 progressbar，不确定进度（旋转指示器场景）时可省略 aria-valuenow。对于 slider，该属性为必填项。

常见错误

• 设置 aria-valuenow 时未同时设置 aria-valuemin 和 aria-valuemax。辅助技术没有范围参考，只能宣告一个孤立的数字，毫无上下文。
• 通过 CSS 变换更新视觉位置却从不更新 aria-valuenow。屏幕阅读器用户将永远听到初始值。
• 值超出最小/最大范围——当最大值为 100 时却设置 aria-valuenow="150"。辅助技术要么截断，要么原样宣告；无论哪种情况都是缺陷。
• 对非数字刻度忘记设置 aria-valuetext。用户听到”5 中的 3”，而刻度实际上是*“低 / 中低 / 中 / 中高 / 高”*。
• 在不是范围小部件的元素上使用 aria-valuenow——普通按钮、图标等。该属性在其支持的角色之外没有任何效果。
• 键盘模型与属性不同步。小部件必须响应箭头键、Home、End、Page Up、Page Down——仅设置属性本身对键盘支持没有任何帮助。

示例

<div
  role="slider"
  tabindex="0"
  aria-label="Volume"
  aria-valuemin="0"
  aria-valuemax="10"
  aria-valuenow="7"
  aria-valuetext="7 out of 10"
>
  <div class="slider-thumb" style="left: 70%"></div>
</div>