ARIA: main ロール

草案
このページは完成していません。

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

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

これは、アボカドについて議論する文書のメインセクションです。この文書のサブセクションでは、その歴史、品種の違い、栽培地域などを議論することができます。

説明

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

<main> 要素は main ロールを持ちます。開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。

文書とアプリケーションは DOM にネストすることができます。これにより、DOM の子孫として複数のメイン要素が存在する可能性があります。このような場合は、aria-owns を組み込んで、文書やアプリケーションの祖先に対するメインの関係を識別します。

例

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

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

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

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

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

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

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

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

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

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

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

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