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>