ARIA：计量器角色

计量器是定义范围内数值的图形显示。例如，显示电池百分比。计量器不适合没有有意义的最大限制的值。计量器不应用于指示进度（例如加载），这应该通过 <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-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 的宽度也需要更新，如 W3C 工作计量器示例 所示。

• <meter>
• <progress>