From 910e8924225717e5bb27ea9ed49fe306236333e7 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 6 Jul 2023 09:51:28 +0900
Subject: [PATCH] =?UTF-8?q?2023/06/13=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/html/element/progress/index.md | 76 ++++++++++++++++-----
 1 file changed, 59 insertions(+), 17 deletions(-)

diff --git a/files/ja/web/html/element/progress/index.md b/files/ja/web/html/element/progress/index.md
index d8b6e1b559e84b..ab5e0bc9be4f13 100644
--- a/files/ja/web/html/element/progress/index.md
+++ b/files/ja/web/html/element/progress/index.md
@@ -1,11 +1,13 @@
 ---
-title: '<progress>: 進捗表示要素'
+title: "<progress>: 進捗インジケーター要素"
 slug: Web/HTML/Element/progress
+l10n:
+  sourceCommit: e04d8d2766c468f149445c0bf438d09f9b2d188c
 ---
 
 {{HTMLSidebar}}
 
-**HTML の `<progress>` 要素**は、タスクの進捗状況を表示します。プログレスバーとしてよく表示されます。
+**`<progress>`** は [HTML](/ja/docs/Web/HTML) の要素で、タスクの進捗状況を表示します。ふつうはプログレスバーとして表示されます。
 
 {{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}
 
@@ -13,23 +15,19 @@ slug: Web/HTML/Element/progress
   <tbody>
     <tr>
       <th scope="row">
-        <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a>
+        <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a>
       </th>
       <td>
-        <a href="/ja/docs/Web/HTML/Content_categories#フローコンテンツ"
-          >フローコンテンツ</a
-        >、<a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ"
-          >記述コンテンツ</a
-        >、ラベル付け可能コンテンツ、知覚可能コンテンツ
+        <a href="/ja/docs/Web/HTML/Content_categories#フローコンテンツ">フローコンテンツ</a
+        >、
+        <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ">記述コンテンツ</a>、ラベル付け可能コンテンツ、
+        <a href="/ja/docs/Web/HTML/Content_categories#知覚可能コンテンツ">知覚可能コンテンツ</a>
       </td>
     </tr>
     <tr>
       <th scope="row">許可されている内容</th>
       <td>
-        <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ"
-          >記述コンテンツ</a
-        >。ただし、子要素に
-        <code>&#x3C;progress></code> 要素を含めてはならない。
+        <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ">記述コンテンツ</a>。ただし、子要素に <code>&#x3C;progress></code> 要素を含めてはならない。
       </td>
     </tr>
     <tr>
@@ -39,15 +37,13 @@ slug: Web/HTML/Element/progress
     <tr>
       <th scope="row">許可されている親要素</th>
       <td>
-        <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ"
-          >記述コンテンツ</a
-        >
+        <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ">記述コンテンツ</a>
         を受け入れるすべての要素
       </td>
     </tr>
     <tr>
       <th scope="row">暗黙の ARIA ロール</th>
-      <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/progressbar_role">progressbar</a></code></td>
+      <td><a href="/ja/docs/Web/Accessibility/ARIA/Roles/progressbar_role"><code>progressbar</code></a></td>
     </tr>
     <tr>
       <th scope="row">許可されている ARIA ロール</th>
@@ -71,7 +67,7 @@ slug: Web/HTML/Element/progress
 
 > **メモ:** {{htmlelement("meter")}} 要素とは異なり、最小値は常に 0 で、`min` 属性は `<progress>` 要素では許可されていません。
 
-> **メモ:** {{cssxref(":indeterminate")}} 擬似クラスは、不定状態のプログレスバーにマッチします。プログレスバーを値がある状態から不定の状態に変更するには、 {{domxref("Element.removeAttribute", "element.removeAttribute('value')")}}. で value 属性を削除しなければなりません。
+> **メモ:** {{cssxref(":indeterminate")}} 擬似クラスは、不定状態のプログレスバーに一致します。プログレスバーを値がある状態から不定の状態に変更するには、 {{domxref("Element.removeAttribute", "element.removeAttribute('value')")}} で value 属性を削除しなければなりません。
 
 ## 例
 
@@ -83,6 +79,52 @@ slug: Web/HTML/Element/progress
 
 {{ EmbedLiveSample("Examples", 200, 50) }}
 
+## アクセシビリティの考慮
+
+### ラベル付け
+
+`<progress>` を使用する場合、ふつうはアクセシビリティのあるラベルを提供しましょう。ARIA 標準のラベル付け属性 [`aria-labelledby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) や [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) を `role="progressbar"` の要素と同様に使用できますが、`<progress>` を用いる場合、代わりに {{htmlelement("label")}} 要素を使用することができます。
+
+> **メモ:** 要素のタグの間に配置されたテキストはアクセシビリティラベルではありません。この要素に対応していない古いブラウザー用の代替用としてのみ推奨されます。
+
+#### 例
+
+```html
+<label>
+  文書をアップロード中: <progress value="70" max="100">70 %</progress>
+</label>
+
+<!-- OR -->
+<br />
+
+<label for="progress-bar">文書をアップロード中</label>
+<progress id="progress-bar" value="70" max="100">70 %</progress>
+```
+
+#### 結果
+
+{{EmbedLiveSample('Labelling')}}
+
+### 特定の領域を記述
+
+`<progress>` 要素がページのある節の読み込みの進捗を表している場合、[`aria-describedby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) を使用して状況を指し、更新中の節に [`aria-busy="true"`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-busy) を設定し、読み込みが完了したら `aria-busy` 属性を解除してください。
+
+#### 例
+
+```html
+<div aria-busy="true" aria-describedby="progress-bar">
+  <!-- content is for this region is loading -->
+</div>
+
+<!-- ... -->
+
+<progress id="progress-bar" aria-label="Content loading…"></progress>
+```
+
+##### 結果
+
+{{EmbedLiveSample('Describing a particular region')}}
+
 ## 仕様書
 
 {{Specifications}}