Why Semantics Matter

ブラウザと支援技術に「意味」を伝える唯一の手段。CSSは見た目しか変えない。

Screen Reader
画面上のテキストや構造を音声で読み上げる支援技術。NVDA, JAWS, VoiceOverなど。
Semantic HTML
意味のあるタグを使うこと。<div>ではなく<button>、<span>ではなく<h1>など。

Button vs Div

❌ Bad (Div Soup)

<div class="btn" onclick="submit()">
  Submit
</div>

- キーボードフォーカスが当たらない（Tabキーで飛ばされる）。
- Screen Readerはこれをただの「グループ」と読む。「ボタン」とは認識しない。
- Enterキー/Spaceキーで実行できない。

✅ Good (Semantic)

<button type="button" class="btn" onClick={submit}>
  Submit
</button>

- デフォルトでフォーカス可能。
- 「ボタン」として読み上げられる。
- キーボードイベントも自動処理。