This page was translated from English by the community. Learn more and join the MDN Web Docs community.

ARIA: main ロール

草案

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

{{ariaref}}

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>

ベストプラクティス

好ましい HTML

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

スキップナビゲーション

スキップナビゲーション（"skipnav" とも呼ばれる）は、支援技術のユーザーが繰返したコンテンツ（メインナビゲーション、情報バナーなど）の大きなセクションをすばやくバイパスすることを可能にするテクニックです。 これにより、ユーザーはページのメインコンテンツにすばやくアクセスできます。

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

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

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

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

追加された利点

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

仕様

仕様 状態
Accessible Rich Internet Applications (WAI-ARIA) 1.1
ARIA Main Role の定義		 勧告
Unknown
Main Landmark Role の定義		 不明

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

TBD

関連情報