AIが作ったHTMLのdivだらけを直す：ボタン・見出し・ラベルの付け方点検

なぜ「見た目は同じ」でも差が出るのか

div は意味を持たない箱です。クリックの処理をつけても、ブラウザはそれをボタンとは扱いません。MDNの button要素の解説 によると、button ならキーボード操作やアクセシビリティの仕組みが最初から備わっていて、div で作るとそれらを自分で実装することになります。

W3Cの Using ARIA（2026年2月に廃止され、参考用に残された草案）も同じ方向です。ネイティブのHTML要素で足りるなら、ARIAのroleを足して別物に見せかけないのが原則です。div に role="button" を付けるなら、フォーカスできて、EnterキーとSpaceキーの両方で動く必要があるとも書かれています。それなら最初から button を使うほうが簡単です。

よくある誤り5例の修正前後

1. クリックできる `div`

<!-- 修正前 -->
<div class="btn" onclick="save()">保存</div>

<!-- 修正後 -->
<button type="button" class="btn" onclick="save()">保存</button>

button は type を省略すると submit として扱われ、フォーム内ではデータ送信が走ります（MDNに記載）。送信が目的でなければ type="button" を付けます。見た目は既存のCSSクラスをそのまま使えます。

2. 文字のないアイコンボタン

<!-- 修正前 -->
<button type="button"><svg>…</svg></button>

<!-- 修正後 -->
<button type="button" aria-label="メニューを開く"><svg aria-hidden="true">…</svg></button>

MDNは、テキストを持たないアイコンボタンにはアクセシブルネーム（読み上げ用の名前）が必要だと説明しています。見える文字を置けるなら、それが最も確実です。aria-label はその代替手段です。

3. 大きさだけで選んだ見出し

<!-- 修正前 -->
<div class="big-title">お問い合わせ</div>
<h4>お名前と連絡先</h4>

<!-- 修正後 -->
<h1>お問い合わせ</h1>
<h2>お名前と連絡先</h2>

MDNの 見出し要素の解説 では、レベルは見た目の大きさでなく内容の階層で選び、大きさを変えたいなら font-size を使うとされています。スクリーンリーダーの利用者は見出しからページを把握するため、h2 の次にいきなり h4 を置くようなレベル飛ばしも避けます。同ページは、1ページに h1 は1つが望ましいとも述べています。

4. プレースホルダーだけの入力欄

<!-- 修正前 -->
<input type="email" placeholder="メールアドレス">

<!-- 修正後 -->
<label for="mail">メールアドレス</label>
<input type="email" id="mail" name="mail" placeholder="例：name@example.com">

MDNの label要素の解説 によると、for と id で関連付けると、ラベルの文字をクリックしても入力欄に移ります。タッチ操作でも押しやすくなります。なお、プレースホルダーは入力を始めると消えるため、項目名はラベルに任せ、プレースホルダーには入力例を置く、というのが編集上のおすすめです（MDNの該当ページに明記された規則ではありません）。

5. ラベルの中にリンクを入れる

<!-- 修正前 -->
<label for="tac">
  <input id="tac" type="checkbox">
  <a href="terms.html">利用規約</a>に同意します
</label>

<!-- 修正後 -->
<p><a href="terms.html">利用規約</a>をお読みください。</p>
<label for="tac">
  <input id="tac" type="checkbox">
  利用規約に同意します
</label>

MDNは、ラベルの中にリンクやボタンなど別の操作要素や、見出しを入れないよう注意しています。同意チェックの文面にAIがリンクを埋め込みがちなので、見つけたら分けます。

点検の判断表

HTMLを見て迷ったら、次の表で「やりたいこと」から部品を選びます。

• 押して処理を実行する、使う部品：button、疑うべきサイン：div・span に onclick
• 別ページへ移動する、使う部品：a href、疑うべきサイン：onclick だけで移動している（編集上の目安）
• 内容の区切りに題をつける、使う部品：h1〜h6、疑うべきサイン：class="title" の div、レベル飛ばし
• 入力欄の項目名を示す、使う部品：label と for/id、疑うべきサイン：placeholder しかない
• 文字のないボタン、使う部品：aria-label など、疑うべきサイン：名前が読み上げられない

AIにHTML点検を頼む指示文

次の文面を、コードの前に貼って使えます。【 】 の部分は自分のものに置き換えてください。

下のHTMLを、セマンティックHTMLの観点で点検してください。
対象は次の4点だけです：
1. クリック操作の div/span → button に置き換えるべき箇所
2. 見出しのレベル（見た目でなく内容の階層で、飛ばさず、h1は1つ）
3. input に label が for/id で関連付いているか
4. 文字のないボタンに名前（見える文字または aria-label）があるか

出力の形式：
- 指摘ごとに「行の抜粋／問題／修正後のコード」を書く
- 見た目が変わりそうな修正には「CSSで調整が必要」と書く
- 判断に迷う箇所は修正せず、質問として挙げる
- 機能（JavaScriptの動作）は変えない

HTML：
【ここに貼る。個人情報や本物のURLは架空の値に置き換える】

「4点だけ」と範囲を絞るのがコツです。広く頼むと、関係のない書き換えまで混ざって差分を確認しにくくなります。

人が確認すること

AIの修正案を受け取ったら、次の順で自分の目と手で確かめます。

1. 差分を見る：onclick や id が消えていないか。label の for と id の文字列が一致しているか。
2. Tabキーだけで操作する：すべてのボタンと入力欄に順番に移れて、フォーカスの枠が見えるか。MDNは、標準のフォーカス表示を消す場合は十分なコントラストを保つよう述べています。
3. EnterとSpaceを試す：ボタンが動くか。フォーム内で意図せず送信されないか。
4. 見出しだけを拾い読みする：見出しを順に読んで、ページの目次として筋が通るか。
5. 見た目を比べる：button はブラウザ既定の枠や余白があるため、修正前と並べて崩れを確認します。

読み上げの確認が必要なら、OS標準のスクリーンリーダーで1画面だけ試せば十分です。AIが「アクセシビリティ対応済み」と述べても、実機確認の代わりにはなりません。