すべてのページコンテンツはランドマークに含まれている必要があります
Squash more accessibility bugs with axe DevTools Pro
コンプライアンスデータと影響
影響を受ける障害
- 視覚障害
- 視聴覚障害
- 運動障害
規格
- Deque Best Practice
修正方法
すべてのコンテンツが HTML5 ランドマーク要素および/または ARIA ランドマーク領域により指定されたランドマーク領域に含まれていることを確認します。
スクリーン・リーダーのユーザーは HTML 要素または ARIA ランドマークに基づき、セクションにナビゲートできます。例えば、スクリーン・リーダーのユーザーにのみ役に立つ代替ですが、ARIA ランドマークを使用してスキップリンクの単純な代替を提供することができます。目の見えるユーザーや、スクリーンを拡大するツールのユーザーはこの追加による利益を得られないため、スキップリンクを ARIA ランドマークで完全に置き換えることは良いプラクティスではありません。
例
以下は、ネイティブ HTML5 のランドマーク要素のマークアップ例です:
<html lang="ja">
<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="ja">
<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 ランドマークの両方を同じ要素で使用することはベストプラクティスと考えられていましたが、将来的にはブラウザーによるサポートが普及するにつれ、おそらく HTML の領域を優先するでしょう。
ルールの説明
スキップリンク以外のすべてのコンテンツを、header, nav, main, そして footer などの個々の領域の中に含めることがベストプラクティスです。
仕組みについて (簡単に言うと)
ページのすべてのコンテンツがランドマーク領域に含まれていることを確認します。
リソース
axe 4.8 ルールの一覧 を参照する
この情報は役に立ちましたか？
回答内容は以下の通りです:
フィードバックが送信された日時: