目次に戻る

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

概要

カテゴリー
配置できる場所
  • 上記カテゴリーの要素が置ける場所。
  • 下記の内容モデルの結果として、progress要素を祖先に持ってはならない。
内容モデル
属性
  • グローバル属性
  • value→現在の進捗状況を示す数値。0以上の浮動小数点数。確定プログレスバーにおけるデフォルトは、0。当該属性がある場合は確定プログレスバー、ない場合は未確定プログレスバーとなる。
  • max→進捗完了とみなす数値。0以上の浮動小数点数。デフォルトは1
  • value属性値は、max属性値（指定がない場合はそのデフォルト）以下の数値でなければならない。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、progressbar。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外のroleは、指定不可。
  • aria-valuemax属性を指定すべきではない。
  • max属性が指定されている場合は、aria-valuemax属性を指定してはならない。
視覚系ブラウザのデフォルトとして期待されるCSS

  progress {appearance: auto;}
視覚系ブラウザにおいて期待されるレンダリング
  • {block-size: 1em; inline-size: 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>
表示結果