すべてのページコンテンツはランドマークに含まれる必要があります
Build more accessible websites with axe DevTools Pro
Compliance Data & Impact
Disabilities Affected
- 盲目
- 盲ろう者
- 運動・器用さ
Standard(s)
- Deque Best Practice
修正方法
すべてのコンテンツが、HTML5ランドマーク要素および/またはARIAランドマーク領域で指定されたランドマーク領域内に含まれていることを確認する。
スクリーン リーダー ユーザーは、HTML要素またはARIAランドマークに基づいてセクションに移動できます。たとえば、ARIAランドマークを使用して、スキップナビゲーション リンクの簡単な置き換えを提供することができますが、この置き換えはスクリーン リーダーのユーザーにとってのみ役立ちます。目の見えるユーザーや画面拡大装置を使用するユーザーは、この追加によるメリットを享受できないため、スキップ ナビゲーション リンクをARIAランドマークに完全に置き換えることはお勧めできません。
例
次の例のマークアップは、ネイティブHTML5ランドマーク要素を示しています。
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
<header>This is the header</header>
<nav>This is the nav</nav>
<main>This is the main</main>
<footer>This is the footer</footer>
</body>
</html>ARIAのベスト プラクティスでは、可能な場合はARIAロールの代わりにネイティブHTML5ランドマーク要素を使用することが求められていますが、次の例のマークアップは機能します。
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
<div role="banner">This is the header</div>
<div role="navigation">This is the nav</div>
<div role="main">This is the main</div>
<div role="contentinfo">This is the footer</div>
</body>
</html>なぜ重要なのか
コンテンツが複数の高レベルセクションに分割されている場合、スクリーン リーダー ユーザーにとってWebページのナビゲーションははるかに簡単になります。セクション外のコンテンツは見つけにくく、コンテンツの目的が不明瞭になる可能性があります。
歴史的に、HTMLには、ページのセクションをヘッダー、ナビゲーション、メイン コンテンツ、フッターとして指定する機能など、いくつかの重要なセマンティック マーカーが欠けていました。同じ要素内でHTML5要素とARIAランドマークの両方を使用することはベスト プラクティスと考えられていますが、将来的にはブラウザーのサポートが拡大するにつれて、ネイティブHTML5要素領域を使用することが推奨されます。
ルールの説明
スキップ リンクを除くすべてのコンテンツを、ヘッダー、ナビゲーション、メイン、フッターなどの個別の領域内に含めることがベスト プラクティスです。
仕組みについて (簡単に言うと)
ページ上のすべてのコンテンツがランドマーク領域内に含まれるようにします。
リソース
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
あなたの回答は次のとおりです。
フィードバックが提出された日付/時刻: