<meter>要素

Technical Summary

Definition / Categories

項目	定義
意味	既知の範囲内にある測定値、または分数値を示すゲージ
Categories	Flow content、Phrasing content、Labelable、Palpable
Context	Phrasing contentが期待される場所
Content model	Phrasing content。ただし子孫にmeter要素を置かない
Tag omission	開始タグ・終了タグとも省略不可
Content attributes	グローバル属性、value、min、max、low、high、optimum
DOM interface	HTMLMeterElement

Meaning boundary: meter / progress / output

要素	主な意味	選ぶ条件
meter	範囲内の測定値	下限・上限を持つ値の現在位置を示す
progress	タスクの完了進捗	処理がどこまで完了したかを示す
output	計算・操作の結果	入力や処理から得た結果を示す

見た目がゲージであることは要素選択の十分な条件ではありません。範囲内の状態か、タスクの進捗か、計算結果かを主張の対象として分離します。

Six attributes and their roles

属性	仕様上の役割
min	範囲の下限。省略時は0。
max	範囲の上限。省略時は1。
value	ゲージが示す測定値。authoring requirementとして指定する。
low	low rangeの上限。
high	high rangeの下限。
optimum	最適点。低い値が良いか、高い値が良いか、中間が良いかの判断に関係する。

6属性はvalid floating-point numberとして解釈され、範囲と境界の整合性が処理モデルに反映されます。単位そのものはmeterの属性として定義されず、必要なら周辺テキストやtitleで文脈を示します。

Value resolution

ユーザーエージェントは属性値を数値として解析し、次の順序でゲージの点を解決します。

1. Minimum: 有効なminがあればその値、なければ0。
2. Maximum: 有効なmaxがあれば候補値、なければ1。候補値がminimum未満ならminimumにする。
3. Actual value: 有効なvalueがあればその値、なければ0。範囲外ならminimumまたはmaximumへ収める。
4. Low boundary: 有効なlowがあればその値、なければminimum。範囲内に収める。
5. High boundary: 有効なhighがあればその値、なければmaximum。low未満にはしない。
6. Optimum point: 有効なoptimumがあればその値、なければminimumとmaximumの中点。範囲内に収める。

結果として、minimum ≤ actual value ≤ maximum、minimum ≤ low boundary ≤ high boundary ≤ maximum、minimum ≤ optimum point ≤ maximumが成立します。min・maxを省略した範囲は0〜1です。

Low / high / optimum

optimumがlowより低ければ低い領域が最適、highより高ければ高い領域が最適、lowとhighの間なら中間領域が最適として扱われます。実際の色や描画はユーザーエージェントに任されるため、色だけを意味の根拠にしません。

<label for="storage-meter">ストレージ使用率</label>
<meter id="storage-meter" min="0" max="100" low="50" high="80" optimum="20" value="72" title="使用率">72 / 100</meter>

この例では、使用率が低いほど望ましいというモデルをoptimum="20"で示しています。72という現在値はhigh rangeにありますが、最適とは限りません。

Fallback text and labeling

仕様は、対応していないユーザーエージェント向けにもゲージ状態のテキスト表現を要素内に置くことを推奨しています。何を測っているかはlabelなどで明示し、数値・単位・範囲の説明をゲージだけの色に依存させません。

<label for="quota-meter">API quota used</label>
<meter id="quota-meter" min="0" max="1000" value="640" title="requests">640 of 1000 requests</meter>

meterはlabelableですが、フォーム送信のためのsubmittable controlではありません。送信値が必要な場合は別のhidden inputなどに値を同期します。

DOM Interface

API	意味	境界
value	解決済みのactual valueを反映するdouble	不正値や範囲外の値は解決後の値として扱われる
min / max	解決済みのminimum / maximum	maxがminimum未満の場合の補正を含む
low / high	解決済みの低境界・高境界	low ≤ highとなるように処理される
optimum	解決済みの最適点	範囲外の候補値は範囲内に収められる
labels	関連するlabelのreadonly NodeList	labelable elementとしての関連付けを確認する入口

Fact / Evidence（主張 / 根拠）

仕様上の意味、値の解決、DOM API、アクセシビリティマッピングを、主張・適用条件・根拠位置に分けて記録します。ブラウザーの実測は下のImplementation Evidenceに分離します。

Evidence

1. HTML Standard: The meter element — meaning、categories、attributes、value resolution、DOM interface
2. HTML Accessibility API Mappings: meter — element role、value・min・maxなどのmappingの入口
3. Web Platform Tests: HTML forms — meter関連の仕様テストを選定する入口

Implementation Evidence

ここには、ブラウザーで実際に見た結果を記録します。仕様に書かれた内容と、一つのブラウザーで確認した内容を分け、まだ調べていないことも示します。

今回のfixture: meter-v1で既定値、不正な値、範囲外の値がどう扱われるか、JavaScriptから読み取れる値、labelとの関連を調べました。範囲を決める属性も含めています。

単一環境でのブラウザー観測を、すべてのブラウザー・platform API・支援技術に共通する結果として登録しません。

Coverage / Open Issues

• 確認済み意味、Categories、Context、Content model、tag omission、content attributes
• 確認済みmin/max/value/low/high/optimumの仕様上の役割と値の解決モデル
• 確認済みHTMLMeterElementの主要APIとHTML-AAMのmeter mappingの入口
• 未完了Chrome、Firefox、Safariでの属性・IDL・描画・low/high/optimumの実装比較
• 未完了選定外のWPTと、境界値・不正値・動的変更に関する他ブラウザーとの比較
• 未完了HTML-AAMの全mapping、platform API、支援技術の読み上げ、単位とtitleの実装差

今回の結果はChrome 154の一環境とWPTの選定2ファイルに限ります。他ブラウザー、Windows UI Automation、支援技術、値を操作して変える動作は未確認です。

Related surface

初心者向けの測定値、フォーム送信との違い、progress・outputとの使い分けはYugienのmeter要素ページを参照してください。タスク完了の進捗はprogress要素、計算結果はoutput要素で確認できます。