ARIA: complementary ロール
=======================

補足 (`complementary`) ランドマークロールは、メインコンテンツに関連する補助セクションを指定するために使用され、しかも分離しても単独で成り立つことができます。 これらのセクションは、サイドバーやコールアウトボックスとして表示されることがよくあります。 可能であれば、代わりに HTML の `<aside>` 要素を使用してください。


```html
<div role="complementary">
  <h2>私たちのパートナー</h2>
  <!-- 補足的なセクションのコンテンツ -->
</div>
```


これはイベントのスポンサーへのリンクを含むサイドバーです。

説明
--

補足 (`complementary`) ロールはランドマークロールです。 ランドマーク (landmark) は、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 補足 (`complementary`) ランドマークロールを持つコンテナー内にリストされたコンテンツは、文書のメインのコンテンツから分離されている場合でも意味をなすべきです。

**メモ:** `<aside>` 要素を使用すると、自動的にセクションが補足 (`complementary`) ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。

例
-


```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>
```

アクセシビリティに関する懸念
--------------

ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

ベストプラクティス
---------

### 好ましい HTML

`<aside>` 要素を使用すると、自動的にセクションが補足 (`complementary`) ロールを持つことを伝えます。 可能であれば、それを代わりに使用することをお勧めします。

### ランドマークのラベル付け

#### 複数のランドマーク

文書に複数の補足 (`complementary`) ランドマークロールや `<aside>` 要素がある場合は、各ランドマークに `aria-label` 属性を使用してラベルを付けるか、それらに適切な説明的なタイトルがある場合は、`aria-labelledby` 属性を使用してそれを指してください。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解できるようになります。


```html
<aside aria-label="使用上の注意">
  <!-- コンテンツ -->
</aside>

...

<aside id="sidebar" aria-label="スポンサー">
  <!-- コンテンツ -->
</aside>
```


#### 冗長な説明

スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、 `aria-label="サイドバー"` の `role="complementary"` の宣言は、"complementary サイドバー" として重複してアナウンスされることがあります。

### 追加された利点

ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。

* ランドマークブラウザー拡張 (英語)
仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # complementary |
| Unknown specification  |

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* `<aside>`: 余談要素
* complementary (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
* HTML のセクションとアウトラインの使用
* ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ
* Using WAI-ARIA Landmarks – 2013 | The Paciello Group
* Accessible Landmarks | scottohara.me
* Aside Revisited | HTML5 Doctor

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`