Level AWCAG 2.2
1.3.1 情報及び関係性
見た目で伝えている情報・構造・関係性を、プログラムで解釈可能にするか、テキストで提供する。
なぜ重要か
スクリーンリーダー
見出し・ランドマークでページ内を高速ナビゲーション。構造がないと一行ずつ読むしかない。
認知障害
明確な構造は内容の理解を助けます。情報の優先度や関係性が見てわかる。
SEO
検索エンジンもセマンティック構造を重視。適切な見出しはSEOにも有効。
リーダーモード
Safari/Chromeのリーダーモードはセマンティック構造に依存して本文を抽出。
ライブデモ
セマンティックHTML vs div地獄
ブラウザ表示（同じに見える）
My Website
記事タイトル
見た目は同じでも構造が違います。
もっと読む© 2026
構造なし
<div class="header"> <div>My Website</div> </div> <div class="content"> <div class="title">記事タイトル</div> <div>本文...</div> <div class="btn">もっと読む</div> </div> <div class="footer">© 2026</div>
スクリーンリーダーは
<header> <main> でページ内をジャンプします。<div> だけでは構造が伝わりません。スクリーンリーダーでの体験
スクリーンリーダー体験
矢印ボタンで要素を移動し、読み上げを体験しましょう。
<header>バナー ランドマーク<h1>見出しレベル1<nav>ナビゲーション<main>メイン ランドマーク<img>画像: イメージ図<button>ボタン: 詳しく見る<footer>フッター 「ヘッダー領域に入りました」
1/7
ペルソナで理解する
佐藤さん（35歳）— 全盲
「見出しジャンプ」を多用。正しい構造があれば目的セクションに直接飛べます。div地獄では最初から最後まで一行ずつ。10分 vs 1分の違いです。