---
title: 'ARIA: complementary ロール'
slug: Web/Accessibility/ARIA/Roles/Complementary_role
tags:
- ARIA
- ARIA Role
- Accessibility
translation_of: Web/Accessibility/ARIA/Roles/Complementary_role
---
<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>
<p>これはイベントのスポンサーへのリンクを含むサイドバーです。</p>
<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>
<div class="note">
<p>{{htmlelement("aside")}} 要素を使用すると、自動的にセクションが補足 (<code>complementary</code>) ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p>
</div>
<h2 id="Examples" name="Examples">例</h2>
<pre class="brush: html"><div role="complementary">
<h2>トレンド記事</h2>
<ul>
<li><a href="#">あなたがすべての気分を感じさせる18のツイート</a></li>
<li><a href="#">私は完璧な昼食用の容器を見つけたので、それを探すのを停止する</a></li>
<li><a href="#">最終的に私たちがこれらの食品と呼ぶべきものを決定する時が来た</a></li>
<li><a href="#">Tumblr で今週見た17の本当に良い投稿</a></li>
<li><a href="#">10の親のハック、私たちはそれらを試したので、働くことを知っている</a></li>
</ul>
</div>
</pre>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2>
<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>
<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>
<pre class="brush: html"><aside aria-label="使用上の注意">
<!-- コンテンツ -->
</aside>
...
<aside id="sidebar" aria-label="スポンサー">
<!-- コンテンツ -->
</aside>
</pre>
<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4>
<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、 <code>aria-label="サイドバー"</code> の <code>role="complementary"</code> の宣言は、"complementary サイドバー" として重複してアナウンスされることがあります。</p>
<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3>
<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。</p>
<ul>
<li><a href="https://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a> (英語)</li>
</ul>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様</th>
<th scope="col">状態</th>
</tr>
<tr>
<td>{{SpecName("ARIA","#complementary","ARIA: Complementary role")}}</td>
<td>{{Spec2('ARIA')}}</td>
</tr>
<tr>
<td>{{SpecName("ARIA Authoring Practices","#aria_lh_complementary","Complementary landmark role")}}</td>
<td>{{Spec2('ARIA Authoring Practices')}}</td>
</tr>
</tbody>
</table>
<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2>
<p>TBD</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<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/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>