アクセシビリティ基礎

アクセシビリティ基礎

アクセシビリティ（a11y）は、すべてのユーザーがWebサイトを利用できるようにするための設計です。

なぜアクセシビリティが必要なのか

問題のあるUI

問題のあるUI:

<!-- コントラストが低い -->
<div style="color: #ccc; background: #fff;">Text</div>

<!-- キーボード操作ができない -->
<button onclick="submit()">Submit</button>

<!-- スクリーンリーダーが読めない -->
<div onclick="navigate()">Link</div>
<!-- 問題点:
    - 視覚障害者が読めない
    - キーボードユーザーが操作できない
    - スクリーンリーダーユーザーが理解できない
-->

アクセシブルなUI:

<!-- 適切なコントラスト -->
<div style="color: #000; background: #fff;">Text</div>

<!-- キーボード操作可能 -->
<button onclick="submit()" tabindex="0">Submit</button>

<!-- セマンティックなHTML -->
<a href="/page" onclick="navigate()">Link</a>
<!-- メリット:
    - すべてのユーザーが利用できる
    - キーボード操作が可能
    - スクリーンリーダーが理解できる
-->

メリット:

1. 包括性: すべてのユーザーが利用できる
2. 法的要件: WCAG準拠が求められる場合がある
3. SEO: 検索エンジン最適化にも有効
4. ユーザー体験: すべてのユーザーの体験が向上

WCAGガイドライン

レベルA（必須）

• キーボード操作: すべての機能がキーボードで操作可能
• コントラスト: テキストと背景のコントラスト比が4.5:1以上
• 代替テキスト: 画像にalt属性を設定

レベルAA（推奨）

• コントラスト: テキストと背景のコントラスト比が4.5:1以上（大文字は3:1以上）
• フォーカス表示: キーボードフォーカスが視覚的に明確
• エラーメッセージ: エラーが明確に表示される

実践例: アクセシブルなボタン

<!-- セマンティックなHTML -->
<button type="button" aria-label="Submit form">
  Submit
</button>

<!-- キーボード操作 -->
<button
  type="button"
  onclick="submit()"
  onkeydown="if(event.key==='Enter') submit()"
  tabindex="0"
>
  Submit
</button>

/* フォーカス表示 */
button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

/* コントラスト */
button {
  background-color: #0066cc;
  color: #ffffff; /* コントラスト比 4.5:1以上 */
}

まとめ

アクセシビリティのポイント：

• 包括性: すべてのユーザーが利用できる
• 法的要件: WCAG準拠が求められる場合がある
• SEO: 検索エンジン最適化にも有効
• ユーザー体験: すべてのユーザーの体験が向上

アクセシビリティは、Web開発において必須の考慮事項です。