ARIA: banner ロールの更新 (#493)

1 files changed, 17 insertions, 10 deletions

diff --git a/files/ja/web/accessibility/aria/roles/banner_role/index.html b/files/ja/web/accessibility/aria/roles/banner_role/index.html
index 156371cecc..3355511c6b 100644
--- a/files/ja/web/accessibility/aria/roles/banner_role/index.html
+++ b/files/ja/web/accessibility/aria/roles/banner_role/index.html
@@ -7,28 +7,28 @@ tags:
   - Accessibility
 translation_of: Web/Accessibility/ARIA/Roles/Banner_role
 ---
-<p class="summary">\{{ariaref}} <span class="seoSummary"><code>banner</code> ロールは、ページの先頭に頻繁に配置される一般的で有益なコンテンツを表します。 これには、通常、ロゴ、会社名、検索アイコン、ページに関連する写真、またはスローガンが含まれます。 </span></p>
+<p class="summary"><span class="seoSummary">バナー (<code>banner</code>) ロールは、ページの先頭に頻繁に配置される一般的で有益なコンテンツを表します。 これには、通常、ロゴ、会社名、検索アイコン、ページに関連する写真、またはスローガンが含まれます。 </span></p>
 
 <pre class="brush: html">&lt;div role="banner"&gt;
-  &lt;img src="companylogo.svg" alt="会社名"&gt;
-  &lt;h1&gt;タイトル&lt;h1&gt;
-  &lt;h2&gt;サブタイトル&lt;/h2&gt;
+  &lt;img src="companylogo.svg" alt="会社名"/&gt;
+  &lt;h1&gt;タイトル&lt;/h1&gt;
+  &lt;p&gt;サブタイトル&lt;/p&gt;
 &lt;/div&gt;</pre>
 
-<p>HTML5 の {{htmlelement("header")}} 要素は、{{htmlelement("aside")}}、{{htmlelement("article")}}、{{htmlelement("main")}}、{{htmlelement("nav")}}、または {{htmlelement("section")}} の子孫でない限り、<code>banner</code> ランドマークと同じ意味を持ちます。</p>
+<p>HTML5 の {{htmlelement("header")}} 要素は、{{htmlelement("aside")}}、{{htmlelement("article")}}、{{htmlelement("main")}}、{{htmlelement("nav")}}、または {{htmlelement("section")}} の子孫でない限り、バナー (<code>banner</code>) ランドマークと同じ意味を持ちます。</p>
 
 <ul>
 </ul>
 
 <h2 id="Description" name="Description">説明</h2>
 
-<p><code>banner</code> ランドマークロールは、それが適用されたコンテナ要素をヘッダーに変換します。 これは、一般的に全ページ上部にあるサイト全体共通のサイトヘッダーのコンテンツ用に予約されているべきです。</p>
+<p>バナーランドマークロール (<code>banner</code> landmark role) は、それが適用されたコンテナー要素をヘッダーに変換します。 これは、一般的に全てのページの上部にあるサイト全体で共通のサイトヘッダーのコンテンツ用に予約されているべきです。</p>
 
-<p>バナー（banner）には、通常ロゴやコーポレートアイデンティティ、おそらくサイト固有の検索ツールが含まれており、一般的にマーケティングチームがサイトのヘッダーやトップバナーと呼ぶものです。 {{htmlelement("header")}} 要素技術がそのバナーで使用されていない場合は、支援技術に対して <code>banner</code> ランドマーク（landmark）を定義するために、<code>role="banner"</code> の宣言を使用するべきです。</p>
+<p>バナーには、通常ロゴやコーポレートアイデンティティ、おそらくサイト固有の検索ツールが含まれており、一般的にマーケティングチームがサイトのヘッダーやトップバナーと呼ぶものです。 {{htmlelement("header")}} 要素の手法がそのバナーで使用されていない場合は、支援技術に対してバナー (<code>banner</code>) ランドマークを定義するために、<code>role="banner"</code> の宣言を使用するべきです。</p>
 
 <p>支援技術は、{{htmlelement("body")}} 要素の子孫であり、<code>&lt;article&gt;</code>、<code>&lt;aside&gt;</code>、<code>&lt;main&gt;</code>、<code>&lt;nav&gt;</code> または <code>&lt;section&gt;</code> サブセクション内にネストされていない場合、バナーとしてページのメイン <code>&lt;header&gt;</code> 要素を識別できます。</p>
 
-<p>各ページに <code>banner</code> ランドマークを持っていてもかまいませんが、各ページは <code>banner</code> ロールを持つ1つの <code>&lt;header&gt;</code> に限定するべきです。 ネストされた <code>document</code> ロールおよび/または <code>application</code> ロールを含むページの場合、ネストされたそれぞれの <code>document</code> ロールや <code>application</code> ロールは、1つの <code>banner</code> ランドマークを持っていてもかまいません。 ページに複数の <code>banner</code> ランドマークが含まれている場合は、それぞれに固有のラベルを付けるべきです。</p>
+<p>各ページにバナー (<code>banner</code>) ランドマークを持っていてもかまいませんが、各ページはバナー (<code>banner</code>) ロールを持つ <code>&lt;header&gt;</code> を1つだけに限定するべきです。 ネストされた文書 (<code>document</code>) ロールおよび/またはアプリケーション (<code>application</code>) ロールを含むページの場合、ネストされたそれぞれの文書 (<code>document</code>) ロールやアプリケーション (<code>application</code>) ロールも1つのバナー (<code>banner</code>) ランドマークを持つことができます。 ページに複数のバナー (<code>banner</code>) ランドマークが含まれている場合は、それぞれに固有のラベルを付けるべきです。</p>
 
 <h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3>
 
@@ -44,7 +44,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Banner_role
 
 <h2 id="Examples" name="Examples">例</h2>
 
-<p>ここでは、ナビゲーションへ飛ぶリンク、ロゴ、タイトル、サブタイトルを含む簡単なバナーがあります。 これがサイトのメインヘッダーであるため、<code>banner</code> ランドマークロールをコンテナ要素に追加しました。</p>
+<p>ここでは、ナビゲーションへ飛ぶリンク、ロゴ、タイトル、サブタイトルを含む簡単なバナーがあります。 これがサイトのメインヘッダーであるため、バナー (<code>banner</code>) ランドマークロールをコンテナー要素に追加しています。</p>
 
 <pre class="brush: html">&lt;div role="banner"&gt;
   &lt;a href="#nav" id="skipToMenu" class="skiptocontent"&gt;キーボードナビゲーションへ飛ぶ&lt;/a&gt;
@@ -64,7 +64,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Banner_role
 
 <h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2>
 
-<p><code>&lt;header&gt;</code> 要素を使用して、ページの任意のサブセクションの子孫でないことを保証するのが最善ですが、場合によっては基になる HTML にアクセスできません。 この場合、JavaScript を使用してページのメインヘッダーに <code>banner</code> ロールを追加できます。 この方法でページのバナーを特定すると、サイトのアクセシビリティが向上します。</p>
+<p><code>&lt;header&gt;</code> 要素を使用して、ページの任意のサブセクションの子孫でないことを保証するのが最善ですが、場合によっては基になる HTML にアクセスできないことがあります。 この場合、JavaScript を使用してページのメインヘッダーにバナー (<code>banner</code>) ロールを追加できます。 この方法でページのバナーを特定すると、サイトのアクセシビリティが向上します。</p>
 
 <h2 id="Specifications" name="Specifications">仕様</h2>
 
@@ -95,3 +95,10 @@ translation_of: Web/Accessibility/ARIA/Roles/Banner_role
  <li>HTML {{htmlelement("header")}} 要素</li>
  <li><a href="https://w3c.github.io/aria-practices/examples/landmarks/banner.html">WC3 Landmarks Example</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>