メインランドマークは別のランドマークに含まれてはいけません
Learn Web Accessibility
Compliance Data & Impact
Disabilities Affected
- 盲目
- 盲ろう者
- 運動・器用さ
Standard(s)
- Deque Best Practice
修正方法
メインランドマークが別のランドマークに含まれていないことを確認する。
すべてのコンテンツが、HTML5ランドマーク要素および/またはARIAランドマーク領域で指定されたランドマーク領域内に含まれていることを確認する。
すべてのコンテンツがナビゲーション領域内に含まれるようにするには、HTML5とARIAランドマークの両方を使用するのが ベスト プラクティス こと。HTML5では、 <header>、 <nav>、 <main>、 <footer> などの要素を使用する。ARIAの対応する要素は、順に role="banner"、 role="navigation"、 role="main"、 role="contentinfo" です。HTML5とARIAマークアップの両方を使用すると、どのスクリーン リーダー テクノロジが使用されている場合でも、Webページをより堅牢かつ機能的にすることができます。
追加されると、スクリーン リーダー ユーザーはARIAランドマークまたはHTML要素に基づいてセクションに移動できるようになります。contentinfo ランドマークは、ナビゲーション スキップ リンクの簡単な代替手段を提供しますが、この代替手段はスクリーン リーダーのユーザーにとってのみ役立ちます。目の見えるユーザーや画面拡大機のユーザーは、この追加機能からあまり恩恵を受けられないため、 contentinfo ランドマークはスキップナビゲーションリンクを完全に置き換えるものではありません。
例
ランドマークの必要最低限の要素だけに絞り込んだ簡素化されたWebページは次のようになります。
<header role="banner">
<p>Put company logo, etc. here.</p>
</header>
<nav role="navigation">
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main role="main">
<p>Put main content here.</p>
</main>
<footer role="contentinfo">
<p>Put copyright, etc. here.</p>
</footer>
リージョンとロールのマークアップは冗長ですが、これは移行期間であり、上記のマークアップが最も堅牢です。
なぜ重要なのか
コンテンツがいくつかの高レベルのセクションに分割されている場合、スクリーン リーダー ユーザーにとってWebページのナビゲーションははるかに簡単になります。これらのセクション以外のコンテンツは見つけにくく、その目的が不明瞭になる可能性があります。
HTMLにはこれまで、ページのセクションをヘッダー、ナビゲーション、メイン コンテンツ、フッターとして指定する機能など、いくつかの重要なセマンティック マーカーが欠けていました。同じ要素内でHTML5要素とARIAランドマークの両方を使用することはベスト プラクティスと考えられていますが、ブラウザーのサポートが増加するにつれて、将来的にはHTML領域が有利になる可能性があります。
HTML Living Standardでは、「階層的に正しいメイン要素とは、祖先要素が html 、 <body>、 <div>、 <form>（アクセス可能な名前なし）、および自律カスタム要素 < に限定されている要素です」と規定されています。各メイン要素は階層的に正しいメイン要素である必要があります。"これは、W3C検証に基づく「ベスト プラクティス」を反映している可能性があります。
ルールの説明
メインのランドマークが別のランドマーク内に含まれないようにすることがベストプラクティスです。すべてのコンテンツは、ヘッダー (role="banner")、コンテンツ (role="main")、フッター (role="contentinfo") などの個別の領域内に含まれている必要があります。
仕組みについて (簡単に言うと)
ページ上のすべてのコンテンツがランドマーク領域内に含まれるようにします。
リソース
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
あなたの回答は次のとおりです。
フィードバックが提出された日付/時刻: