path: root/files/ja/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html

---
title: progressbar ロールの使用
slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role
tags:
  - ARIA
  - ARIA Role
  - Accessibility
translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role
---
<p class="summary"><span class="seoSummary">このテクニックは、<code><a href="http://www.w3.org/TR/wai-aria/#progressbar">progressbar</a></code> ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。</span></p>

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

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

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

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

<div class="note"><strong>注</strong>: 支援技術は、<a href="http://www.w3.org/TR/wai-aria/#aria-valuetext">aria-valuetext</a> が指定されていない限り、<code>aria-valuemin</code> の値と <code>aria-valuemax</code> の値の間の範囲のパーセントとして、<code>aria-valuenow</code> の値を一般にレンダリングします。 この計算に適した方法で、<code>aria-valuemin</code>、<code>aria-valuemax</code>、<code>aria-valuenow</code> の値を設定することをお勧めします。</div>

<div class="note">注: <code>progressbar</code> ロールを持つ要素の暗黙の <code><a href="http://www.w3.org/TR/wai-aria/#aria-readonly">aria-readonly</a></code> の値は <code>true</code> です。</div>

<h2 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h2>

<p>スクリーンリーダーは進捗状況の更新が発生したときにアナウンスするべきです。 プログレスバーにラベルが付いている場合は、ラベルテキストも同様に述べるべきです。</p>

<div class="note"><strong>注</strong>: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Example_1_Basic_progressbar_with_percentage_values" name="Example_1_Basic_progressbar_with_percentage_values">例 1: パーセンテージ値を持つ基本的なプログレスバー</h3>

<pre class="brush: html">&lt;div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"&gt;20 %&lt;/div&gt;
</pre>

<p> </p>

<h3 id="Example_2_Using_aria-valuetext" name="Example_2_Using_aria-valuetext">例 2: aria-valuetext の使用</h3>

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

<p> </p>

<h3 id="Working_Examples" name="Working_Examples">動作する例</h3>

<p> </p>

<h2 id="Notes" name="Notes">注</h2>

<p> </p>

<h2 id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/wai-aria/#progressbar">progressbar</a></li>
 <li><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuenow">aria-valuenow</a></li>
 <li><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuemin" title="ARIA techniques">aria-valuemin</a></li>
 <li><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuemax">aria-valuemax</a></li>
 <li><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuetext">aria-valuetext</a></li>
</ul>

<h2 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h2>

<p> </p>

<h2 id="Compatibility" name="Compatibility">互換性</h2>

<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p>

<h2 id="Additional_resources" name="Additional_resources">その他のリソース</h2>