要素の使い分け

言語指定、ランドマーク、ボタンとリンク、フォーム、ダイアログのマークアップルール

内容の意味に合った要素を使うと、スクリーンリーダーなどの支援技術が構造や役割を正しく伝えられます。div や span に ARIA 属性を足して代用する前に、同じ役割を持つ HTML 要素がないかを確認してください。

言語指定

html 要素に lang 属性を指定します。スクリーンリーダーの読み上げ言語や、ブラウザの翻訳機能の判定に使われます。

<html lang="ja">

ページ内に別の言語のまとまった文章がある場合は、その要素にも lang 属性を指定します。

<p lang="en">This page is also available in English.</p>

ランドマーク

ページの大きな区画は、次の要素でマークアップします。支援技術の利用者は、ランドマーク単位でページ内を移動できます。

要素	用途
`header`	サイト共通のヘッダー
`nav`	グローバルナビゲーション、パンくずリストなどの主要なナビゲーション
`main`	ページ固有の主要コンテンツ（1 ページに 1 つ）
`aside`	本文と関連の薄い補足（サイドバーなど）
`footer`	サイト共通のフッター

nav を複数置く場合は、aria-label で区別できるようにします。

<nav aria-label="グローバルナビゲーション">...</nav>
<nav aria-label="パンくずリスト">...</nav>

ボタンとリンク

ページや場所を移動する: a 要素（href 属性あり）
その場で処理を実行する（開閉、送信、切り替えなど）: button 要素

div や span にクリックイベントを付けてボタンの代わりにしないでください。キーボード操作やフォーカス、役割の読み上げを自前で実装することになります。

<!-- ✅ 良い例 -->
<a href="/contact/">お問い合わせ</a>
<button type="button" aria-expanded="false" aria-controls="menu">メニュー</button>

<!-- ❌ 悪い例 -->
<a href="#" onclick="openMenu()">メニュー</a>
<div class="button" onclick="openMenu()">メニュー</div>

フォーム

入力欄には label 要素でラベルを関連付けます。プレースホルダーはラベルの代わりにしません。
ラジオボタンやチェックボックスのグループは、fieldset と legend でまとめます。
必須項目には required 属性を指定し、画面上でも「必須」と分かるように表示します。
氏名・メールアドレス・電話番号・住所などには、type 属性と autocomplete 属性を指定し、入力の手間を減らします。
エラーメッセージや補足説明は、aria-describedby で入力欄と関連付けます。

<label for="email">メールアドレス（必須）</label>
<input
  id="email"
  type="email"
  name="email"
  autocomplete="email"
  required
  aria-describedby="email-error"
/>
<p id="email-error">メールアドレスの形式で入力してください。</p>

<fieldset>
  <legend>お問い合わせの種類</legend>
  <label><input type="radio" name="type" value="estimate" /> 見積もり</label>
  <label><input type="radio" name="type" value="other" /> その他</label>
</fieldset>

ダイアログ

モーダルダイアログは dialog 要素で実装し、JavaScript の showModal() で開きます。showModal() で開いたダイアログは、次の動作をブラウザが標準で提供します。

最前面（トップレイヤー）に表示されるため、z-index の調整が不要
ダイアログの外の要素は操作できなくなる
Esc キーで閉じられる

<button type="button" id="open-dialog">詳細を見る</button>

<dialog id="detail-dialog" aria-labelledby="detail-dialog-title">
  <h2 id="detail-dialog-title">詳細</h2>
  <p>...</p>
  <form method="dialog">
    <button>閉じる</button>
  </form>
</dialog>

const dialog = document.querySelector("#detail-dialog");
document.querySelector("#open-dialog").addEventListener("click", () => {
  dialog.showModal();
});

<form method="dialog"> 内のボタンを押すと、JavaScript を書かずにダイアログを閉じられます。