HTMLツール

無料 HTMLランドマークチェッカー

HTMLを貼り付けてスクリーンリーダーナビゲーション用のARIAランドマーク要素をチェックします。

ツールを読み込み中...

HTMLランドマークチェッカーとは

ARIAランドマークは、ページ領域を定義するHTML要素です。スクリーンリーダーはランドマークを使用して、ユーザーがページセクション間を移動できるようにします。一般的なランドマークにはheader、main、nav、footer、aside、formなどがあります。ランドマークが不足すると、支援技術ユーザーにとってページのナビゲーションが難しくなります。

クイックアンサー

HTMLを貼り付けて、どのARIAランドマーク要素が存在し、どれが欠落しているかを確認します。スクリーンリーダーはランドマークを使用して、キーボードや支援技術のユーザーがページ領域間を移動できるようにします。

Last updated: 2026-06-11

制限事項

  • このツールは要素名のみをスキャンします。aria-label、aria-labelledby、または表示見出しによって提供されるアクセシブルな名前があるかどうかはチェックしません。
  • ARIAロールの割り当ては検証しません。role属性を持つ要素は、暗黙的なランドマークロールを上書きまたは削除する可能性があります。
  • 部分的なHTMLの貼り付けは、貼り付け範囲外のランドマーク要素を見逃す可能性があります。完全な監査にはページ全体のHTMLを貼り付けてください。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

  1. HTMLマークアップを入力領域に貼り付けます。
  2. ツールがランドマーク要素をスキャンし、存在するものを表示します。
  3. ページから欠落しているランドマークを示す結果を確認します。
  4. 不足しているランドマーク要素を追加して、ページのアクセシビリティを向上させます。

主な用途

  • 公開前に静的ページテンプレートのランドマーク要素の欠落を監査する。
  • サイトのすべてのページにスクリーンリーダーナビゲーション用のmain要素があることを確認する。
  • ナビゲーションブロックが汎用的なdiv要素ではなくnav要素を使用していることを確認する。

用途

使用例

mainランドマークの欠落

ページテンプレートの監査でmain要素が欠落していることが判明しました。チェッカーが必須ランドマークとしてフラグを立て、スクリーンリーダーがページコンテンツにジャンプするためにmainに依存していることを説明します。

divナビゲーションの検出

ブログレイアウトにheaderとfooter要素はあるものの、ナビゲーションにdivを使用しています。チェッカーがdivをnav要素に置き換えるよう提案し、より良いランドマーク構造を推奨します。

よくあるミス

  • 1ページに複数のmain要素を使用することは標準的ではなく、スクリーンリーダーのナビゲーションを混乱させます。
  • 実際のサイトナビゲーションにのみ使用すべきnav要素を、すべての要素に適用してしまう。
  • アクセシブルな名前がないsection要素を使用すると、ARIAランドマークとしての有用性が低下します。

検証

  1. ブラウザで監査済みページを読み込み、スクリーンリーダーまたはブラウザ拡張機能を使用してランドマークごとに移動し、期待される領域が存在することを確認します。
  2. axe DevToolsやWAVEなどの正式なアクセシビリティテストツールでページを実行し、ランドマーク監査結果をクロスチェックします。

FAQ

HTMLランドマークチェッカーのFAQ

1ページにいくつのmain要素を持つべきですか?

1ページに1つの表示可能なmain要素が標準です。複数のmain要素は標準的ではなく、スクリーンリーダーのナビゲーションを混乱させます。

HTML5のセマンティック要素とARIAランドマークは同じですか?

はい。header、main、nav、footer、aside、formなどの要素は暗黙的なARIAランドマークロールを持っています。これらのセマンティック要素を使用すると、自動的にランドマークが作成されます。

section要素にラベルは必要ですか?

アクセシブルな名前がないsection要素は、アクセシビリティツリーでランドマークとして認識されません。独立したページ領域を表すsection要素には、aria-labelまたはaria-labelledby属性を追加してください。

article要素とsection要素の違いは何ですか?

articleは独立した自己完結型のコンテンツ(ブログ投稿、ニュース記事、商品カード、フォーラム投稿など)を表します。sectionはページのテーマ別グループ化であり、通常は見出しを持ち、ページの他の部分からのコンテキストを必要とします。独立して配布可能なコンテンツにはarticleを、ページをテーマ別領域に分割するにはsectionを使用します。

関連ツール

その他のhtmlツール

こちらもお試しください

こちらもお試しください