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> などの非セマンティック要素を使用して、ランドマークロールでセマンティクスを追加することは、それほど良いプラクティスではありません。しかし、どちらか一方または両方を含めてください。そうでなければ、スクリーンリーダーユーザーにとってコンテンツはもはやナビゲートしやすくありません。

仕様書

関連情報

• ARIA: section ロール
• ARIA: banner ロール
• ARIA: complementary ロール
• ARIA: contentinfo ロール
• ARIA: form ロール
• ARIA: main ロール
• ARIA: navigation ロール
• ARIA: region ロール
• ARIA: search ロール
• Using HTML landmark roles to improve accessibility MDN ブログ（2023年）