Zenn
🍣

HTMLランドマークの基本知識

に公開
HTML
ランドマーク
tech

ランドマークとは

  • ウェブページの主要な部分や区域を示すHTML要素
  • スクリーンリーダーなどの支援技術を使用する人がページを理解・移動しやすくするための仕組み
  • 本の「目次」や「章」のような役割を果たす

主なHTMLランドマーク要素

  • <header>: ページのヘッダー部分（タイトル、ロゴなど上部）
  • <nav>: ナビゲーション部分（メニュー、リンク集）
  • <main>: ページのメインコンテンツ
  • <article>: 独立して意味を持つ記事や内容
  • <section>: 関連する内容をグループ化する部分
  • <aside>: メインコンテンツに関連する補足情報
  • <footer>: ページのフッター部分（著作権情報、連絡先など下部）

ランドマークの使用例

<header>
  <h1>私のウェブサイト</h1>
</header>

<nav>
  <ul>
    <li><a href="index.html">ホーム</a></li>
    <li><a href="about.html">自己紹介</a></li>
  </ul>
</nav>

<main>
  <h2>ようこそ</h2>
  <p>これは私のウェブサイトです。</p>
</main>

<footer>
  <p>© 2025 私のウェブサイト</p>
</footer>

スクリーンリーダーへの影響

セマンティックなタグ vs 非セマンティックなタグ

例1: <header>テスト:headerタグ</header>

  • スクリーンリーダーは「ヘッダー」と読み上げてから内容を読み上げる
  • ユーザーはショートカットキーで直接ヘッダーに移動できる
  • ページ構造の一部として認識される
  • ランドマークナビゲーションを使って素早くジャンプできる

例2: <div class="header">テスト：divタグ</div>

  • 単なる「テスト：divタグ」としか読み上げない
  • クラス名「header」はスクリーンリーダーには認識されない
  • ランドマークとして認識されないため、ショートカットを使った移動ができない
  • ページ構造の一部として認識されない

重要な違い

  1. セマンティック（意味的）な違い:

    • <header> はセマンティックなタグで「これはヘッダー部分です」という意味を持つ
    • <div> には意味がなく、単にコンテンツを分ける箱としての役割だけ

  2. アクセシビリティへの影響:

    • スクリーンリーダーは <header> を特別なランドマークとして認識する
    • クラス名（class="header"）は見た目を整えるためのもので、スクリーンリーダーには意味を持たない

  3. ナビゲーションの容易さ:

    • ランドマークタグを使うと、スクリーンリーダーユーザーは「ヘッダーに移動」「メインコンテンツに移動」などのコマンドで簡単に移動できる
    • <div> だけだと、全てのコンテンツを順番に読み上げるしかない

まとめ

  • 適切なランドマークタグを使うことで、視覚障害を持つユーザーが効率的にページを理解し、必要な情報にアクセスしやすくなる
  • これはウェブアクセシビリティの基本的な考え方の一つ
  • セマンティックなHTMLを使うことで、すべての人にとって使いやすいウェブサイト作りに貢献できる

Discussion