ARIA: figure ロールの更新 (#724)

1 files changed, 24 insertions, 23 deletions

diff --git a/files/ja/web/accessibility/aria/roles/figure_role/index.html b/files/ja/web/accessibility/aria/roles/figure_role/index.html
index f878ae0eaa..ceca6b81dc 100644
--- a/files/ja/web/accessibility/aria/roles/figure_role/index.html
+++ b/files/ja/web/accessibility/aria/roles/figure_role/index.html
@@ -7,9 +7,7 @@ tags:
   - Accessibility
 translation_of: Web/Accessibility/ARIA/Roles/Figure_Role
 ---
-<div>\{{ariaref}}</div>
-
-<p>ARIA の <code>figure</code> ロールは、適切な意味論が存在しないページコンテンツ内の図表を識別するために使用できます。 図表は、通常、1つまたは複数の画像、コードスニペット、または情報を通常のテキストの流れとは異なる方法で配置するその他のコンテンツとみなされます。</p>
+<p>ARIA の図表 (<code>figure</code>) ロールは、適切な意味論がまだ存在しないページコンテンツ内の図表を識別するために使用できます。 図表は一般的に、正規のテキストの流れとは異なる方法で情報を伝える、1つ以上の画像、コードスニペット、またはその他のコンテンツと見なされます。</p>
 
 <pre class="brush: html">&lt;div role="figure" aria-labelledby="caption"&gt;
   &lt;img src="image.png"
@@ -18,17 +16,17 @@ translation_of: Web/Accessibility/ARIA/Roles/Figure_Role
 &lt;/div&gt;
 </pre>
 
-<p>上記の例では、画像とキャプションの2つの別々のコンテンツ項目で構成される図表があります。 これは、コンテンツを <code>role="figure"</code> を使用して図表として識別する {{htmlelement("div")}} 要素で囲まれます。</p>
+<p>上記の例では、画像とキャプションという2つの別々のコンテンツ項目で構成される図表があります。 これは、<code>role="figure"</code> を使用してコンテンツを図表として識別する {{htmlelement("div")}} 要素で囲まれています。</p>
 
-<p>図表を作成するために ARIA を使用する代わりに、{{htmlelement("figcaption")}} 要素と共に、ネイティブな意味論の HTML {{htmlelement("figure")}} 要素の使用を検討してください。 以下の{{anch("Best practices","ベストプラクティス")}}をご覧ください。</p>
+<p>図表の作成に ARIA を使用する代わりに、ネイティブで意味論的な HTML {{htmlelement("figure")}} 要素を {{htmlelement("figcaption")}} 要素と共に使用することを検討してください。 以下の{{anch("Best practices","ベストプラクティス")}}をご覧ください。</p>
 
 <h2 id="Description" name="Description">説明</h2>
 
-<p>一緒にグループ化され、図表（画像、動画、音声、コードスニペット、または他のコンテンツを含む）として消費されるべきコンテンツは、 <code>role="figure"</code> を使用して図表として識別できます。</p>
+<p>(画像、動画、音声、コードスニペット、または他のコンテンツを含む可能性がある) 図表としてまとめて消費されるべきコンテンツは、 <code>role="figure"</code> を使用して図表として識別できます。</p>
 
-<p>図表のコンテンツをどのように書くべきかについての鉄則はありません。 他のコンテンツと同様にアクセス可能であることを確認するべきです。 例えば、支援技術のユーザーがキーボードやマウスなどで操作できることを確認してください。</p>
+<p>図表のコンテンツをどのように書くべきかについての鉄則はありません。 他のコンテンツと同様にアクセスできることを確認するべきです。 例えば、支援技術のユーザーによって知覚できることや、キーボードやマウスでナビゲートできることなどを確認します。</p>
 
-<p>図表にキャプションやラベルを追加する場合は、さまざまな方法でキャプションやラベルを追加できます。 図表を説明するコンテンツを含む要素に ID を追加し、図表上の適切な属性でその ID を参照して、次のように図表をラベルに関連付けることができます。</p>
+<p>さまざまな方法で、図表にキャプションやラベルを追加できます。 次のように、図表を説明するコンテンツを含む要素に ID を追加し、その ID を図表の適切な属性内で参照して、図表をラベルに関連付けることができます。</p>
 
 <pre class="brush: html">&lt;div role="figure" aria-labelledby="figure-1"&gt;
   ...
@@ -47,10 +45,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Figure_Role
   &lt;figcaption&gt;図表を説明するテキスト。&lt;/figcaption&gt;
 &lt;/figure&gt;</pre>
 
-<ul>
-</ul>
-
-<p>ラベルを画面に表示したくないが、支援技術のユーザーにわかりやすいラベルを提供したい場合は、図表コンテナの <code>aria-label</code> 属性を使用できます。</p>
+<p>ラベルを画面に表示したくないが、支援技術のユーザーにわかりやすいラベルを提供したい場合は、図表コンテナーに <code>aria-label</code> 属性を使用できます。</p>
 
 <pre class="brush: html">&lt;div role="figure" aria-label="図表を説明するテキスト。"&gt;
   ...
@@ -62,23 +57,22 @@ translation_of: Web/Accessibility/ARIA/Roles/Figure_Role
   ...
 &lt;/figure&gt;</pre>
 
-<p>一般的には、メインテキストから図表を参照するべきですが、図表は参照元の要素と同じ場所に表示する必要はありません。</p>
+<p>一般的には、本文から図表を参照するべきですが、図表は参照元の要素と同じ場所に表示する必要はありません。</p>
 
 <div class="note">
-<p><strong>注</strong>: 可能な限り、意味論的 HTML 要素を使用して図表とそのキャプション（{{htmlelement("figure")}} と {{htmlelement("figcaption")}}）をマークアップするべきです。 詳しくは、{{anch("Best practices","ベストプラクティス")}}を参照してください。</p>
+<p><strong>注</strong>: 可能な限り、適切な意味論の HTML 要素を使用して図表とそのキャプション ({{htmlelement("figure")}} と {{htmlelement("figcaption")}}) をマークアップするべきです。 詳しくは、{{anch("Best practices","ベストプラクティス")}}を参照してください。</p>
 </div>
 
-<p> </p>
 
 <h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3>
 
 <dl>
  <dt>aria-describedby</dt>
- <dd>キャプションとしての参照テキストを含む要素の ID。</dd>
+ <dd>キャプションとしての参照テキストを含む要素の id。</dd>
  <dt>aria-labelledby</dt>
- <dd>ラベルとしてのテキストを含む要素の ID。</dd>
+ <dd>ラベルとしてのテキストを含む要素の id。</dd>
  <dt>aria-label</dt>
- <dd>ラベルとして機能することができるテキストを含む要素がない場合は、<code>figure</code> ロールを持つ要素や <code>&lt;figure&gt;</code> 要素の <code>aria-label</code> の値として直接ラベルを追加できます。</dd>
+ <dd>ラベルになるようなテキストを含む要素がない場合は、図表 (<code>figure</code>) ロールを持つ要素や <code>&lt;figure&gt;</code> 要素の <code>aria-label</code> の値として直接ラベルを追加できます。</dd>
 </dl>
 
 <h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3>
@@ -87,11 +81,11 @@ translation_of: Web/Accessibility/ARIA/Roles/Figure_Role
 
 <h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3>
 
-<p>ロール固有の JavaScript 要件はありません。 HTML の意味論を制御できない場合は、JavaScript でこれらのロールとプロパティを追加することで、HTML のアクセシビリティを向上させることができます。</p>
+<p>ロールに固有の JavaScript 要件はありません。 HTML の意味論を制御できない場合は、JavaScript でこれらのロールとプロパティを追加することで、HTML のアクセシビリティを向上させることができます。</p>
 
 <h2 id="Examples" name="Examples">例</h2>
 
-<p><code>aria-labelledby</code> でその ID を参照することによって、図表の説明的なラベルを提供する段落を識別するために、このページの最初の例を拡張することもできます。</p>
+<p>次のように、ページの最初の例を拡張して、<code>aria-labelledby</code> でその ID を参照することにより、図表の説明的なラベルを提供する段落を特定することもできます。</p>
 
 <pre>&lt;div role="figure" aria-labelledby="figure-1"&gt;
   &lt;img src="diagram.png"
@@ -105,9 +99,9 @@ translation_of: Web/Accessibility/ARIA/Roles/Figure_Role
 
 <h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2>
 
-<p>たとえば、HTML を制御できないが、JavaScript を使用した後でアクセシビリティを動的に向上させる必要がある場合など、<code>role="figure"</code> のみを使用する必要があります。</p>
+<p>必要な場合にのみ <code>role="figure"</code> を使用してください。 例えば、HTML を制御できないが、JavaScript を使用して事後に動的にアクセシビリティを向上させることができる場合などです。</p>
 
-<p>可能であれば、図表とそのキャプション（{{htmlelement("figure")}} と {{htmlelement("figcaption")}}）をマークアップするために、適切な意味論の HTML 要素を使用する必要があります。 たとえば、上記の例は次のように書き直されます。</p>
+<p>可能であれば、適切な意味論の HTML 要素を使用して、図表とそのキャプション ({{htmlelement("figure")}} と {{htmlelement("figcaption")}}) をマークアップするべきです。 例えば、上記の例は次のように書き直すべきです。</p>
 
 <pre class="brush: html">&lt;figure&gt;
   &lt;img src="diagram.png"
@@ -144,5 +138,12 @@ translation_of: Web/Accessibility/ARIA/Roles/Figure_Role
  <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li>
  <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li>
  <li><a href="/ja/docs/Web/HTML/Element/figure">HTML &lt;figure&gt; 要素</a></li>
- <li><a href="/ja/docs/Web/HTML/Element/figcaption">HTML &lt;figcation&gt; 要素</a></li>
+ <li><a href="/ja/docs/Web/HTML/Element/figcaption">HTML &lt;figcaption&gt; 要素</a></li>
 </ul>
+
+
+<section id="Quick_links">
+    <ol>
+        <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA ロール</strong></a>{{ListSubpagesForSidebar("/ja/docs/Web/Accessibility/ARIA/Roles")}}</li>
+    </ol>
+</section>