このテクニックは、progressbar ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。
progressbar ロールは、長い時間がかかったり、いくつかの手順で構成されるタスクの進捗状況を表示する要素に使用するべきです。
プログレスバーは、ユーザーの要求を受けて、アプリケーションが要求された操作を完了に向かって進捗していることを示します。 プログレスバーの実際の値が決定できる場合、開発者は aria-valuenow、aria-valuemin、aria-valuemax 属性を使用してこの進捗状況を示す必要があります。 進捗値が不確定な場合、開発者は aria-valuenow 属性を省略するべきです。
タスクが進捗するにつれて、aria-valuenow 値は、この進捗を支援技術製品に示すために動的に更新されなければならない。
プログレスバーがページの特定の領域のロード進捗状況を説明している場合、作者は、aria-describedby を使用してステータスを指し示すべきであり、ロードが完了するまで領域の aria-busy 属性を true に設定するべきです（SHOULD）。 これは常に読み取り専用なので、ユーザーはプログレスバーの値を変更することはできません。
aria-valuemin の値と aria-valuemax の値の間の範囲のパーセントとして、aria-valuenow の値を一般にレンダリングします。 この計算に適した方法で、aria-valuemin、aria-valuemax、aria-valuenow の値を設定することをお勧めします。スクリーンリーダーは進捗状況の更新が発生したときにアナウンスするべきです。 プログレスバーにラベルが付いている場合は、ラベルテキストも同様に述べるべきです。
<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>
TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する