diff options
| -rw-r--r-- | files/ja/web/accessibility/aria/roles/complementary_role/index.html | 31 |
1 files changed, 19 insertions, 12 deletions
diff --git a/files/ja/web/accessibility/aria/roles/complementary_role/index.html b/files/ja/web/accessibility/aria/roles/complementary_role/index.html index ff7fe74363..d2510bac2d 100644 --- a/files/ja/web/accessibility/aria/roles/complementary_role/index.html +++ b/files/ja/web/accessibility/aria/roles/complementary_role/index.html @@ -7,11 +7,11 @@ tags: - Accessibility translation_of: Web/Accessibility/ARIA/Roles/Complementary_role --- -<p>\{{ariaref}}<span class="seoSummary"><code>complementary</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、メインコンテンツに関連する補助セクションを指定するために使用され、しかも分離しても単独で成り立つことができます。 これらのセクションは、サイドバーやコールアウトボックスとして表示されることがよくあります。 可能であれば、代わりに HTML の {{htmlelement("aside")}} 要素を使用してください。</span></p> +<p><span class="seoSummary">補足 (<code>complementary</code>) <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>は、メインコンテンツに関連する補助セクションを指定するために使用され、しかも分離しても単独で成り立つことができます。 これらのセクションは、サイドバーやコールアウトボックスとして表示されることがよくあります。 可能であれば、代わりに HTML の {{htmlelement("aside")}} 要素を使用してください。</span></p> <pre class="brush: html"><div role="complementary"> <h2>私たちのパートナー</h2> - <!-- 補完的なセクションのコンテンツ --> + <!-- 補足的なセクションのコンテンツ --> </div> </pre> @@ -19,10 +19,10 @@ translation_of: Web/Accessibility/ARIA/Roles/Complementary_role <h2 id="Description" name="Description">説明</h2> -<p><code>complementary</code> ロールは<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマーク（landmark）は、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 <code>complementary</code> ランドマークロールを持つコンテナ内にリストされたコンテンツは、文書のメインのコンテンツから分離されている場合でも意味をなすべきです。</p> +<p>補足 (<code>complementary</code>) ロールは<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>です。 ランドマーク (landmark) は、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 補足 (<code>complementary</code>) ランドマークロールを持つコンテナー内にリストされたコンテンツは、文書のメインのコンテンツから分離されている場合でも意味をなすべきです。</p> <div class="note"> -<p>{{htmlelement("aside")}} 要素を使用すると、自動的にセクションが <code>complementary</code> ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p> +<p>{{htmlelement("aside")}} 要素を使用すると、自動的にセクションが補足 (<code>complementary</code>) ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p> </div> <h2 id="Examples" name="Examples">例</h2> @@ -41,19 +41,19 @@ translation_of: Web/Accessibility/ARIA/Roles/Complementary_role <h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> -<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> <h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> <h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> -<p>{{htmlelement("aside")}} 要素を使用すると、自動的にセクションが <code>complementary</code> ロールを持つことを伝えます。 可能であれば、それを代わりに使用することをお勧めします。</p> +<p>{{htmlelement("aside")}} 要素を使用すると、自動的にセクションが補足 (<code>complementary</code>) ロールを持つことを伝えます。 可能であれば、それを代わりに使用することをお勧めします。</p> <h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> <h4 id="Multiple_landmarks" name="Multiple_landmarks">複数のランドマーク</h4> -<p>文書に複数の <code>complementary</code> ランドマークロールや {{htmlelement("aside")}} 要素がある場合は、各ランドマークに <code>aria-label</code> 属性を使用してラベルを付けるか、それらに適切な説明的なタイトルがある場合は、<code>aria-labelledby</code> 属性を使用してそれを指してください。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解できるようになります。</p> +<p>文書に複数の補足 (<code>complementary</code>) ランドマークロールや {{htmlelement("aside")}} 要素がある場合は、各ランドマークに <code>aria-label</code> 属性を使用してラベルを付けるか、それらに適切な説明的なタイトルがある場合は、<code>aria-labelledby</code> 属性を使用してそれを指してください。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解できるようになります。</p> <pre class="brush: html"><aside aria-label="使用上の注意"> <!-- コンテンツ --> @@ -68,14 +68,14 @@ translation_of: Web/Accessibility/ARIA/Roles/Complementary_role <h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> -<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、 <code>aria-label="サイドバー"</code> の <code>role="complementary"</code> の宣言は、"complementary サイドバー" として重複してアナウンスすることができます。</p> +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、 <code>aria-label="サイドバー"</code> の <code>role="complementary"</code> の宣言は、"complementary サイドバー" として重複してアナウンスされることがあります。</p> <h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> -<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーはドキュメントの大きなセクションを素早く識別してナビゲートできます。</p> +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。</p> <ul> - <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> + <li><a href="https://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a> (英語)</li> </ul> <h2 id="Specifications" name="Specifications">仕様</h2> @@ -106,9 +106,16 @@ translation_of: Web/Accessibility/ARIA/Roles/Complementary_role <ul> <li>{{htmlelement("aside")}}: 余談要素</li> <li><a href="https://www.w3.org/TR/wai-aria/#complementary">complementary (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li> - <li><a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">HTML5 ドキュメントのセクションとアウトライン</a></li> - <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> <li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li> <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li> <li><a href="http://html5doctor.com/aside-revisited/">Aside Revisited | HTML5 Doctor</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> |