Webアクセシビリティの始め方

✅ 回答

アクセシビリティは「障害のある人だけのもの」ではなく、「誰でも・どんな状況でも使えるサイト」を作ることです。片手がふさがっている人、明るい屋外でスマホを見ている人にも関係します。

最初にやる3つ（これだけで8割カバー）

対策	やること	誰が助かる？
セマンティックHTML	divの代わりにnav, main, buttonを使う	スクリーンリーダー利用者
alt属性	全てのimgに説明テキストを書く	画像が見えない人、通信が遅い環境
キーボード操作	Tabキーで全要素にアクセスできるようにする	マウスが使えない人

alt属性の書き方

<!-- ❌ alt属性がない or 意味がない -->
<img src="hero.jpg">
<img src="hero.jpg" alt="画像">

<!-- ✅ 画像の内容を説明する -->
<img src="hero.jpg" alt="学園祭のステージで演奏するバンドメンバー">

<!-- 装飾目的の画像は空のaltでOK -->
<img src="divider.svg" alt="">

ボタンは button 要素で作る

<!-- ❌ divをボタンとして使っている（キーボードで操作できない） -->
<div class="btn" onclick="submit()">送信</div>

<!-- ✅ button要素を使う（Enter/Spaceで押せる、フォーカスが当たる） -->
<button type="submit">送信</button>

<button> を使えば、キーボード操作（Enter/Space）、フォーカス表示、スクリーンリーダー対応が全部自動でついてきます。

チェック方法

• Tabキーテスト — マウスを使わずTabキーだけでサイトを操作してみる
• Lighthouse — Chrome開発者ツール → Lighthouse → Accessibilityスコアを確認
• 画像を非表示にする — alt属性だけで内容が伝わるか確認

なぜ中高生が気にすべき？

• 情報Ⅰの授業 — 「ユニバーサルデザイン」として出題される
• AO入試 — 「アクセシビリティに配慮しました」はアピールポイントになる
• 実務 — 企業のWebサイトではアクセシビリティ対応が義務化の流れ

今日からできるアクセシビリティ対応

<!-- ✅ 画像にalt属性をつける -->
<img src="cat.jpg" alt="窓辺で寝ている茶色い猫" />

<!-- ✅ フォームにlabelをつける -->
<label for="email">メールアドレス</label>
<input type="email" id="email" />

<!-- ✅ ボタンに意味のあるテキストを入れる -->
<button>送信する</button>  <!-- ✅ -->
<button><img src="icon.svg" alt="送信" /></button>  <!-- ✅ -->

<!-- ❌ 色だけで情報を伝えない -->
<p style="color:red">エラーです</p>  <!-- ❌ 色覚異常の人に伝わらない -->
<p>⚠️ エラー: メールアドレスが無効です</p>  <!-- ✅ -->

なぜアクセシビリティが大切？

1. 日本人の5%（約600万人）が何らかの障害を持っている

2. 高齢者はフォントサイズやコントラストの影響を受けやすい

3. SEOにも好影響（Googleはアクセシブルなサイトを評価する）

4. 情報Ⅰの授業でも「ユニバーサルデザイン」として出題される