accessibility-compliance

アクセシビリティへの準拠

目次

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

概要

WCAG ガイドラインに従って包括的なアクセシビリティ機能を実装し、障害のある方を含め、誰もがアプリケーションを利用できるようにします。

使用する場面

• 一般公開向けの Web アプリケーションを構築する
• WCAG 2.1／2.2 AA または AAA への準拠を確保する
• スクリーンリーダー（NVDA、JAWS、VoiceOver）をサポートする
• キーボードのみで操作できるナビゲーションを実装する
• ADA、Section 508、または同様の規制に対応する
• SEO と全体的なユーザーエクスペリエンスを向上させる
• アクセシビリティ監査を実施する

クイックスタート

最小限の動作例：

<div class="button" onclick="submit()">Submit</div>


<button type="submit" aria-label="Submit form">Submit</button>


<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"
// ... (see reference guides for full implementation)

リファレンスガイド

references/ ディレクトリにある詳細な実装：

ガイド	内容
ARIA を使ったセマンティック HTML	ARIA を使ったセマンティック HTML
アクセシビリティ対応の React コンポーネント	アクセシビリティ対応の React コンポーネント
キーボードナビゲーションハンドラー	キーボードナビゲーションハンドラー
カラーコントラスト検証ツール	カラーコントラスト検証ツール
スクリーンリーダー向けアナウンス	スクリーンリーダー向けアナウンス
フォーカス管理	フォーカス管理

ベストプラクティス

✅ 推奨事項

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

❌ 禁止事項

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