ARIA: landmark ロール
ランドマークは、ページの重要なサブセクションです。landmark ロールは、ユーザーが直接ナビゲートできることを望む可能性が高い、重要なコンテンツセクションの aria ロール値の抽象親クラスです。
メモ:
landmark ロールは 抽象ロール です。ドキュメントの完全性のためにここに含まれています。ウェブ開発者は使用すべきではありません。
説明
landmark は、ユーザーが簡単にセクションにナビゲートでき、ページの動的に生成されたサマリーに含めることを望む可能性が高い、重要なコンテンツセクションの抽象ロールです。ランドマークにより、支援技術はナビゲートしてコンテンツを素早く見つけることができます。
ランドマークロールを作成するには、<section>、<nav>、<main> などのセマンティック要素を使用してコンテンツの目的を定義するか、role="banner"、role="complementary"、role="region" など landmark ロールのサブクラスである ARIA ロールを追加します。 role="landmark" は使用しないでください。
可視ラベルを提供し、 aria-labelledby で参照する必要があります。必要に応じて、 aria-label で簡潔で説明的なラベルを提供できます。
スクリーンリーダーユーザーにとって、ランドマークロールを追加することで効果的にスクリーンリーダーユーザーの「スキップリンク」を作成しますが、ランドマークロールは他の方法では表面化されないため、ページ内ナビゲーションを置き換えることはありません。
ベストプラクティス
role="landmark" は使用しないでください。HTML とサブクラスランドマークロールを使用してください。
ランドマークは、コンテンツがナビゲート可能な領域にあることを保証します。role="main" には <main> を、 role="banner" には <header> を、role="navigation" には <nav> を、role="contentinfo" には <footer> を使用してください。関連するセマンティック要素と冗長にロールを含めることも良いプラクティスです。 <div> などの非セマンティック要素を使用して、ランドマークロールでセマンティクスを追加することは、それほど良いプラクティスではありません。しかし、どちらか一方または両方を含めてください。そうでなければ、スクリーンリーダーユーザーにとってコンテンツはもはやナビゲートしやすくありません。
仕様書
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # landmark |