progress要素とmeter要素は処理の進行か既知範囲の測定値かで使い分ける

ファイル送信やデータ処理がどこまで終わったかを示すならprogress要素、容量使用率や評価値など、既知の範囲内にある測定値を示すならmeter要素を使います。

どちらも棒状に表示されることがありますが、形で選ぶ要素ではありません。終わりへ向かって進む作業か、範囲の中にある値かを先に決めます。

progress要素は作業の完了までを示す

HTML5のprogress要素の定義では、progress要素はタスクの完了までの進行を表します。現在値が分かる場合と、処理中だが残量を決められない場合の両方を扱えます。

完了までの総量が100、現在までに35終わった仮例は、次の形です。

<label for="upload-progress">ファイル送信</label>
<progress id="upload-progress" value="35" max="100">35%</progress>

value属性は完了した量、max属性は必要な総量を示します。単位は任意ですが、一つの要素の中ではそろえます。maxは0より大きい値にし、valueは0以上、max以下にします。

maxを省略した場合の最大値は1です。0から100までの値を使うなら、max="100"を省略しません。

進み具合が分からないprogress要素ではvalue属性を外す

処理が始まっているが、残り時間や完了量を計算できない場合は、progress要素からvalue属性を外します。

<label for="search-progress">検索処理</label>
<progress id="search-progress">処理中</progress>

value="0"は、進行量が分からない状態ではありません。総量に対して0まで進んだ、値が確定している状態です。不明を0で代用すると、開始直後なのか、進行を計算できないのかを区別できなくなります。

JavaScriptで進行量を取得できた時点で、value属性へ数値を設定します。処理の完了を表示したいだけなら、実際の処理状態と表示値がずれないよう、値を更新する責任を決めます。

meter要素は既知の範囲にある測定値を示す

HTML5のmeter要素の定義では、meter要素は既知の範囲にある一つの測定値または割合を表します。ディスク使用量、検索結果の関連度、投票率などが例です。

架空の保存容量について、0から100の範囲で72を使っている例は次の形です。

<label for="storage-meter">保存容量の使用率</label>
<meter id="storage-meter"
       min="0" max="100" value="72"
       low="50" high="80" optimum="30">72%</meter>

meter要素ではvalue属性が必須です。minとmaxが範囲の下限と上限、valueが測定値です。lowとhighは範囲を低、中、高の三領域へ分け、optimumは望ましい位置を示します。

この仮例ではoptimumがlowより小さいため、値が低い側を望ましい領域として示します。値が高いほど良い測定なら、optimumを高い側へ置きます。色や形だけに意味を任せず、何の値か、現在値はいくつかを文字でも示します。

meter要素には範囲のない単独の数値を入れない

meter要素は、上限のない身長や重量など、範囲を定めていない数値を表示する要素ではありません。比較する範囲がなければ、通常の文章として数値と単位を書きます。

minとmaxを省略すると、範囲は0から1になります。その状態でvalue="72"と書いても、0から100の72という意味にはなりません。百分率で使うなら、value="0.72"とするか、max="100" value="72"として範囲を明示します。

値の意味と代替テキストを確認する

progressとmeterの内容には、現在値を文字でも書きます。対応していないブラウザーや、棒の形だけでは意味を読み取れない利用者にも、処理名、現在値、最大値が伝わる形にします。

ブラウザーによって標準の見た目は異なります。デザインをそろえる前に、対象ブラウザーで要素の意味が失われないか、値を更新できるか、文字情報を読めるかを確認します。

まず棒状に表示している箇所を一つ選び、それが終わりへ進む作業か、既知範囲の測定値かを書いてください。作業ならprogress、測定値ならmeterへ分け、value、下限、上限の根拠を残します。