目次に戻る

progress要素:HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
  • 上記カテゴリー要素が置ける場所。
  • 下記の内容モデルの結果として、progress要素祖先に持ってはならない。
内容モデル
属性
  • グローバル属性
  • value→現在の進捗状況を示す数値。0以上の浮動小数点数確定プログレスバーにおけるデフォルトは、0。当該属性がある場合は確定プログレスバー、ない場合は未確定プログレスバーとなる。
  • max→進捗完了とみなす数値。0以上の浮動小数点数デフォルト1
  • value属性値は、max属性値(指定がない場合はそのデフォルト)以下の数値でなければならない。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、progressbarデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • {height:1em; width:10em; vertical-align:-0.2em}(縦方向プログレスバーの場合はこれを縦に変換)のプログレスバーを、inline-blockボックスで表示。
  • 始端は、横方向プログレスバーの場合は左端(ただし、当該要素書字方向が右から左の場合は、右端)、縦方向プログレスバーの場合は下端。
  • ただし、寸法が正方形の場合は、書字方向とは独立したプログレスウィジェット(例えば、円形のプログレスリング)を表示。
  • 確定プログレスバーの場合は、max属性値に対するvalue属性値の位置を示すべきである。
  • その他の詳細は、原則として、プラットフォーム(オペレーティングシステムとかブラウザとか)のルールによることが期待される。
  • value属性値が0より小さい場合(非準拠)は、value属性値0とみなす。
  • value属性値max属性値(のデフォルト)より大きい場合(非準拠)は、value属性値max属性値(のデフォルト)と同値とみなす。
意味・用法

タスクが完了するまでの進捗状況を表す。

作業率が明らかな場合は、確定プログレスバー

作業率が不明な場合は、未確定プログレスバー

進捗状況ではなく、既知の範囲の中にあるスカラー量又は小数の値などを表す場合は、progress要素ではなく、meter要素を用いる。

アクセシビリティ関連

私見・補足

確定プログレスバーで実際に進捗状況を動的に表示するためには、スクリプトvalue属性値と当該要素内容を制御しなければならない。

progress要素はタスクの進捗状況であり、その数値はタスク完了まで継続的に変動することが当然の前提であるのに対し、meter要素は決まった範囲内における特定の値・割合を示すものであり、基本的には静的な数値である。

表示確認

ソース

  <div>
  <label>未確定プログレスバー<br />
  <progress>進行中</progress></label>
  </div>
  <div>
  <label>確定プログレスバー(スクリプトで操作せず)<br />
  <progress value="70" max="100">70%進行中</progress></label>
  </div>
  
表示結果

未対応ブラウザでは、内容テキストが表示される。

IE6表示のスクリーンショット
IE6表示:代替コンテンツが表示されている

IE7からIE9も同様。