ランドマーク領域

はじめに

ARIAランドマークロールは、ウェブページの構成と構造を識別する強力な方法を提供します。 ページのセクションを分類し、ラベルを付けることで、レイアウトを通じて視覚的に伝えられる構造情報をプログラムで表現できるようにします。 スクリーンリーダーは、ページの重要なセクションへのキーボードナビゲーションを提供するために、ランドマークロールを活用します。 ランドマーク領域は、"スキップリンク"のターゲットとして、また、キーボードナビゲーションの強化にブラウザ拡張機能で使用することもできます。

このセクションでは、支援技術の利用者がページのレイアウトの意味を容易に理解するために、どのようにHTMLセクショニング要素とARIAランドマークロールを使用するかを説明します。

HTMLセクショニング要素

いくつかのHTMLセクショニング要素は、自動的にARIAランドマーク領域を作成します。 よって、支援技術の利用者にページの論理的なビューを提供するためには、HTMLセクショニング要素を使用する際の効果を理解することが重要です。 [[HTML-ARIA]]には、HTML要素のロールマッピングに関する詳細な情報が含まれています。

ランドマークデザインの一般的な原則

ページ上のすべての知覚可能なコンテンツをランドマーク領域のいずれかに含め、各ランドマーク領域にセマンティックに意味のある役割を与えることは、支援技術の利用者が自分たちのニーズに関連する情報を見逃さないようにする最も効果的な方法の一つです。

ステップ1: 論理構造を特定する

• ページを知覚可能なコンテンツの領域に分割します。通常、デザイナーは整列と間隔を使用して視覚的にその領域を示します。
• 必要に応じて、領域は論理的なサブ領域にさらに定義できます。
• サブ領域の例として、ポータルアプリケーションのポートレットがあります。

ステップ2: 各領域にランドマークロールを割り当てる

• 領域内のコンテンツの種類に基づいてランドマークロールを割り当てます。
• banner、main、complementary、contentinfoランドマークは、トップレベルのランドマークであるべきです。
• ランドマークロールは、提示される情報の親子関係を識別するためにネストできます。

ステップ3: 領域にラベルを付ける

• 特定のランドマークロールがページ上で複数回使用される場合、そのランドマークの各インスタンスに一意なラベルを提供します。 複数のインスタンスに同じラベルを提供することが有益な稀な状況が一つあります: 各インスタンスのコンテンツと目的が同一である場合。 例: 大きな検索結果テーブルが、テーブルの上下に同一のページネーションコントロールを2セット持っているため、各セットは検索結果というラベルのナビゲーション領域にあります。 この場合、2つのインスタンスを区別するためにラベルに追加情報を追加することは、役立つよりもかえって混乱を招く可能性があります。
• ランドマークがページ上で一度しか使用されない場合、ラベルを必要としない場合があります。 以下のランドマークロールのセクションを参照してください。
• 領域が見出し要素（例：h1-h6）で始まる場合、aria-labelledby属性を使用して領域のラベルとして使用できます。
• 領域がラベルを必要とし、かつ見出し要素を持たない場合、aria-label属性を使用してラベルを提供します。
• ラベルの一部としてランドマークロールを使用しないでください。 例えば、ラベルが「サイトナビゲーション」のナビゲーションランドマークは、スクリーンリーダーによって「サイトナビゲーションナビゲーション」として発表されます。 ラベルは単に「サイト」であるべきです。

ランドマークロール