✅ アクセシブルなHTMLを書くための7つのポイント【初心者向け保存版】

「誰にとっても使いやすいWebサイト」を目指す第一歩！
アクセシブルなHTMLを意識すると、スクリーンリーダーや音声読み上げ、キーボード操作などに対応できるようになります。

✅ 1. 意味のあるタグを使おう（セマンティックHTML）

<!-- NG -->
<div class="header">見出しです</div>

<!-- OK -->
<h2>見出しです</h2>

🔍 ポイント

• <div> や <span> は意味がない
• 見出し → <h1>〜<h6>
• セクション → <header>、<section>、<main>、<footer> など
• 意味に合ったタグを使うことで、スクリーンリーダーや検索エンジンに内容が伝わる！

✅ 2. 画像は内容に応じて正しい記述をしよう

🖼 基本的な画像にはalt属性を忘れずに！

<img src="logo.png" alt="〇〇のロゴ">

📱 画面サイズで画像を切り替える場合は <picture> を使う！

<picture>
  <source srcset="img_sp.jpg" media="(max-width: 768px)">
  <img src="img_pc.jpg" alt="サービスのイメージ写真">
</picture>

→ モバイルでは img_sp.jpg、PCでは img_pc.jpg を表示できます。

✅ 3. 見出しの順番は正しく使おう

<!-- NG：h1の次にh3を使ってしまう -->
<h1>タイトル</h1>
<h3>小見出し</h3>

<!-- OK -->
<h1>タイトル</h1>
<h2>見出し</h2>
<h3>小見出し</h3>

🎯 ポイント

• h1 は基本的に ページに1つ
• 流れを意識して 数字を飛ばさない
• 見た目でサイズを変えたい場合はCSSで調整！

✅ 4. リンクテキストは具体的に書こう

<!-- NG -->
<a href="/service">こちら</a>

<!-- OK -->
<a href="/service">サービスの詳細を見る</a>

🧭 ポイント

• 「どこへ飛ぶのか」が伝わるように！
• 「詳しくはこちら」「クリック」だけでは意味が通じない

✅ 5. フォームには必ずlabelを対応させよう

<!-- OK -->
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

📝 補足

• for属性とidをセットで使う
• ラベルがあることで、読み上げやタップ範囲が広がり、使いやすくなる

✅ 6. キーボード操作もできるように意識しよう

• ボタンには必ず <button> や <a> を使う
• JavaScriptで作るUIでも tabキーで移動・enterキーで操作できるかを確認

<!-- OK：リンクとしての機能を果たす -->
<a href="/contact" class="btn">お問い合わせ</a>

<!-- OK：ボタンで何か処理をする -->
<button type="button">もっと見る</button>

✅ 7. 色だけに頼らない表現を心がけよう

<!-- NG：色だけで強調 -->
<p style="color: red;">エラーがあります</p>

<!-- OK：テキストやアイコンでも伝える -->
<p><span aria-hidden="true">⚠️</span> エラーがあります</p>

🎯 補足

• 色覚障がいの人にもわかりやすく
• 「赤だからエラー」ではなく、文字やマークで伝える工夫を！

📝 まとめ表

💡 アクセシビリティは「誰かのため」だけじゃない

実はこれらの工夫は、Googleの評価にも影響します。
つまりアクセシブルなHTMLを書くことは、SEOやユーザー満足度アップにも直結します！

✉️ あなたのリクエスト教えてください！

「この記事わかりやすかった！」
「他にもこんな記事書いてほしい！」
そんな声を、ぜひXのDMで教えてください！😊📩

できるだけリクエストにお応えして、今後の記事作成に活かしていきます！

▶️ Xもフォローしてもらえるとめちゃくちゃ嬉しいです！