アクセシビリティ コンプライアンス

目次

• 概要
• 使用するべき場面
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

WCAG ガイドラインに従って包括的なアクセシビリティ機能を実装し、障害を持つ人を含むすべてのユーザーがアプリケーションを使用できるようにします。

使用するべき場面

• 公開向けの Web アプリケーションを構築する場合
• WCAG 2.1/2.2 AA または AAA コンプライアンスを確保する場合
• スクリーンリーダー (NVDA、JAWS、VoiceOver) をサポートする場合
• キーボードのみのナビゲーションを実装する場合
• ADA、Section 508、または同様の規制に対応する場合
• SEO と全体的なユーザーエクスペリエンスを向上させる場合
• アクセシビリティ監査を実施する場合

クイックスタート

最小限の動作例：

<!-- 悪い例: セマンティックでないマークアップ -->
<div class="button" onclick="submit()">Submit</div>

<!-- 良い例: セマンティック HTML -->
<button type="submit" aria-label="Submit form">Submit</button>

<!-- 適切な ARIA を持つカスタムコンポーネント -->
<div
  role="button"
  tabindex="0"
  aria-pressed="false"
  onclick="toggle()"
  onkeydown="handleKeyPress(event)"
>
  Toggle Feature
</div>

<!-- 適切なラベルとエラーハンドリングを備えたフォーム -->
<form>
  <label for="email">Email Address</label>
  <input
    id="email"
    type="email"
    name="email"
    aria-required="true"
// ... (リファレンスガイドを参照して完全な実装を確認してください)

リファレンスガイド

references/ ディレクトリの詳細な実装：

ベストプラクティス

✅ すべきこと

• セマンティック HTML 要素を使用する
• 画像に対するテキスト代替を提供する
• 十分な色のコントラストを確保する (最小 4.5:1)
• キーボードナビゲーションをサポートする
• フォーカス管理を実装する
• スクリーンリーダーでテストする
• ARIA 属性を正しく使用する
• スキップリンクを提供する
• ラベル付きでフォームをアクセシブルにする
• テキストのサイズ変更を 200% までサポートする

❌ してはいけないこと

• 情報を伝えるために色のみに依存する
• フォーカスインジケーターを削除する
• マウス / タッチ操作のみを使用する
• コントロールなしでメディアを自動再生する
• キーボードトラップを作成する
• 正の tabindex 値を使用する
• ユーザー設定をオーバーライドする
• スクリーンリーダーから隠すべきコンテンツを視覚的にのみ隠す