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>