progressbar ロールの使用

このテクニックは、progressbar ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。

progressbar ロールは、長い時間がかかったり、いくつかの手順で構成されるタスクの進捗状況を表示する要素に使用するべきです。

プログレスバーは、ユーザーの要求を受けて、アプリケーションが要求された操作を完了に向かって進捗していることを示します。 プログレスバーの実際の値が決定できる場合、開発者は aria-valuenow、aria-valuemin、aria-valuemax 属性を使用してこの進捗状況を示す必要があります。 進捗値が不確定な場合、開発者は aria-valuenow 属性を省略するべきです。

タスクが進捗するにつれて、aria-valuenow 値は、この進捗を支援技術製品に示すために動的に更新されなければならない。

プログレスバーがページの特定の領域のロード進捗状況を説明している場合、作者は、aria-describedby を使用してステータスを指し示すべきであり、ロードが完了するまで領域の aria-busy 属性を true に設定するべきです（SHOULD）。 これは常に読み取り専用なので、ユーザーはプログレスバーの値を変更することはできません。

<div
  role="progressbar"
  aria-valuenow="20"
  aria-valuemin="0"
  aria-valuemax="100">
  20 %
</div>

<div
  role="progressbar"
  aria-valuenow="20"
  aria-valuemin="0"
  aria-valuetext="ステップ 2: ファイルをコピーしています... "
  aria-valuemax="100">
  ステップ 2: ファイルをコピーしています...
</div>