ARIA: meter 角色

描述

计量器是数字值在预定范围内的图形化显示。例如，显示电池百分比。计量器不适用于没有有意义最大值的数值。计量器不应用于指示进度（例如加载），这应该通过 <progress> 元素来传达。

每个具有 role="meter" 的元素还必须具有以下其中一项：

• 一个 aria-label 属性。
• 一个 aria-labelledby 属性，指向一个包含描述计量器文本的元素。

所有后代都是展示性的

有些用户界面组件，当在平台辅助功能 API 中表示时，只能包含文本。辅助功能 API 无法表示 meter 中包含的语义元素。为了解决这个限制，浏览器会自动将 presentation 角色应用于任何 meter 元素的后代元素，因为这个角色不支持语义子元素。

例如，考虑以下包含标题的 meter 元素：

<div role="meter"><h3>Title of my meter</h3></div>

由于 meter 的后代是演示性的，以下代码是等效的：

<div role="meter"><h3 role="presentation">Title of my meter</h3></div>

从辅助技术用户的角度来看，由于前面的代码片段在 辅助功能树 中是等效的，因此该标题不存在。

<div role="meter">Title of my meter</div>

关联的 ARIA 角色、状态和属性

aria-valuenow

设置为介于 aria-valuemin 和 aria-valuemax 之间的十进制值，表示计量器的当前值。

aria-valuetext

辅助技术通常将 aria-valuenow 的值显示为百分比。如果这不准确，请使用此属性使计量器值易于理解。

aria-valuemin

设置为表示最小值并且小于 aria-valuemax 的十进制值。

aria-valuemax

设置为表示最大值并且大于 aria-valuemin 的十进制值。

建议使用原生的 <meter> 元素而不是 meter 角色。用户代理会根据当前 value 相对于 min 和 max 值的情况，为 <meter> 元素提供一个样式化的小部件。在使用非语义元素时，需要使用 ARIA 属性、JavaScript 和 CSS 来重新创建原生语义元素的所有功能。

示例

使用 role="meter" 的计量器示例

<div
  role="meter"
  aria-valuenow="90"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-labelledby="cpu_usage_label">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width: 90%">
    <rect x="0" y="0" width="100%" height="100%" fill="currentColor"></rect>
  </svg>
</div>

在上述场景中，当 aria-valuenow 值更新时，SVG 的宽度也需要更新，正如在 ARIA Authoring Practices Guide (APG) 工作计量器示例 中所见。

规范

另见

• <meter>
• <progress>