ARIA: main ロール
==============

メイン (`main`) ランドマークロールは、文書の主要なコンテンツを示すために使用します。 メインコンテンツ領域は、文書の中心的な話題やアプリケーションの中心的な機能と直接関連したり、それらを拡張するコンテンツで構成されます。


```html
<div id="main" role="main">
  <h1>アボカド</h1>
  <!-- メインセクションのコンテンツ -->
</div>
```


これは、アボカドについて説明する文書のメインセクションです。 この文書のサブセクションでは、その歴史、さまざまな品種、栽培地域などについて説明します。

説明
--

メイン (`main`) ロールは、文書のメインコンテンツを識別する、ナビゲーションに関するランドマークロールです。 ランドマークは、支援技術によって、文書の大きなセクションをすばやく識別してナビゲートするために使用できます。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝えられる構造情報をプログラムで表現することができます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションへのキーボードナビゲーションを提供します。 ランドマークロールを介してナビゲートする場合、メインロールは「メインコンテンツへスキップする (Skip to main content) 」リンクの代わりになります。 メイン (`main`) ランドマークロールは、文書ごとに 1 つだけあるべきです。

`<main>` 要素は、メイン (`main`) ロールを持ちます。 開発者は、ARIA を使用するよりも、正しい意味論の HTML 要素を使用することを常に好むべきです。

文書 (`document`) とアプリケーション (`application`) は DOM 内でネストすることができます。 これにより、DOM の子孫として複数のメイン要素を持つことになる可能性があります。 このような場合には、メインとその祖先である文書やアプリケーションとの関係を識別するために `aria-owns` を含めます (訳注: aria-owns は、DOM 階層で親子関係に無い要素において、親に指定することで子でない要素を子として組み込むためのものであり、文書やアプリケーションとメインが DOM 階層で親子関係にあれば必要ありません) 。

例
-


```html
<body>
  <!-- 主要なナビゲーション -->

  <div role="main">
    <h1>第一次インドシナ戦争</h1>
    <!-- 記事のコンテンツ -->
  </div>

  <!-- サイドバーとフッター -->
</body>
```

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

### 文書ごとに `main` ロールを 1 つのみ使用する

メイン (`main`) ランドマークロールは、文書ごとに 1 回のみ使用するべきです。

JavaScript によってトリガーされたときにページコンテンツを更新するなどで、文書に 2 つのメイン (`main`) ロールが含まれている場合、`hidden` 属性をトグルするなどの手法によって、アクティブでないメイン (`main`) ロールの存在を支援技術から取り除くべきです。


```html
<main>
  <h1>アクティブな <code>main</code> 要素</h1>
  <!-- コンテンツ -->
</main>

<main hidden>
  <h1>隠された <code>main</code> 要素</h1>
  <!-- コンテンツ -->
</main>
```

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

### 好ましい HTML

`<main>` 要素を使用すると自動的にセクションがメイン (`main`) ロールを持つことを伝えます。 可能な限り、`<main>` 要素を代わりに使用することをお勧めします。

### スキップナビゲーション

スキップナビゲーション (スキップナビ (skipnav) とも呼ばれる) は、支援技術のユーザーが繰り返されるコンテンツの大きなセクション (メインナビゲーション、情報バナーなど) をすばやくバイパスできるようにする手法です。 これにより、ユーザーはページのメインコンテンツにすばやくアクセスできます。 (訳注: このページでも、ページが表示されたらすぐ Tab キーを押すことで、ページ上部にリンクが表示されるようになっています。)

`role="main"` という宣言を持つ要素に `id` 属性を追加すると、それをスキップナビゲーションリンクのターゲットにすることができます。


```html
<body>
  <a href="#main-content">メインコンテンツへスキップする</a>

  <!-- ナビゲーションとヘッダーのコンテンツ -->

  <div id="main-content" role="main">
    <!-- メインページのコンテンツ -->
  </div>
</body>
```


* WebAIM: "Skip Navigation" Links (日本語対訳)
### 追加された利点

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

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

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

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

TBD

関連情報
----

* <main>: メイン要素
* main (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
* HTML のセクションとアウトラインの使用
* ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ
* Using WAI-ARIA Landmarks – 2013 | The Paciello Group
* Accessible Landmarks | scottohara.me
* The main element | 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 ロールの使用`