アクセシビリティの落とし穴：見た目で判断してはいけない5つのNG実装例

見出しタグを見た目だけで装飾している

NG例：

<p class="heading">製品情報</p>

このように<p>タグをCSSで大きく見せるだけでは、スクリーンリーダーは「見出し」と認識できません。

改善例：

<h2>製品情報</h2>

正しいセマンティクスで見出しタグ（<h1>〜<h6>）を使うことで、読み上げ順序やページ構造が明確になります。

画像に代替テキストが設定されていない

NG例：

<img src="banner.jpg">

視覚に頼れないユーザーには、何の画像なのかがわかりません。

改善例：

<img src="banner.jpg" alt="春のセールバナー：全商品20%OFF">

意味のある画像には具体的なaltテキストを、装飾画像にはalt=""を設定しましょう。

JavaScript依存のボタンリンク

NG例：

<span onclick="location.href='/contact'" style="cursor:pointer;">お問い合わせ</span>

<span>はインタラクティブ要素ではないため、キーボード操作や支援技術では機能しません。

改善例：

<a href="/contact">お問い合わせ</a>

または、明確な動作が必要なら：

<button onclick="submitForm()">送信</button>

フォームラベルがない、もしくは視覚的なプレースホルダーだけ

NG例：

<input type="text" placeholder="お名前">

placeholderは一時的な表示のため、音声読み上げで正しく伝わらない場合があります。

改善例：

<label for="name">お名前</label>
<input id="name" type="text">

ラベルは明示的に設定することで、アクセシビリティが大きく向上します。

コントラスト比が不足しているデザイン

NG例：

.button {
  background-color: #eeeeee;
  color: #cccccc;
}

背景と文字のコントラストが不足しており、視認性が著しく低下します。

改善例：

.button {
  background-color: #004080;
  color: #ffffff;
}

WCAGの基準に従い、テキストと背景のコントラスト比は最低でも4.5:1を確保しましょう。

まとめ：アクセシビリティは「使えること」が最優先

どれだけ美しく見えるUIでも、使えなければ意味がありません。今回紹介したような「よくあるNG例」は、制作者の意図に反してユーザー体験を損なう要因になります。視覚・聴覚・操作手段に関係なく、すべてのユーザーが等しく情報にアクセスできるよう、実装時には常にアクセシビリティの視点を忘れないようにしましょう。