APG パターン

ダイアログ（モーダル）パターン

ダイアログは、メインウィンドウ上に表示されるウィンドウで、ユーザーに情報を提示したり入力を求めたりします。モーダルダイアログは背景との操作を遮断します。

キーボード操作

キー動作
Tabダイアログ内のフォーカス可能な要素間を移動（フォーカストラップ内）
Shift + Tabダイアログ内のフォーカス可能な要素間を逆方向に移動
Escapeダイアログを閉じ、トリガー要素にフォーカスを戻す

必要な ARIA

ダイアログコンテナ
role="dialog"要素がダイアログであることを示す
aria-modal="true"モーダルダイアログであることを示す（背景操作不可）
aria-labelledbyダイアログのタイトル要素のID
aria-describedbyダイアログの説明テキスト要素のID（任意）
閉じるボタン
aria-label視覚的にラベルがない場合に「ダイアログを閉じる」などを指定

ライブデモ

ボタンをクリックしてダイアログを開き、Tabでフォーカスがダイアログ内に閉じ込められることを確認してください。Escapeで閉じられます。

フォーカス管理の要点

1.ダイアログが開いたら、最初のフォーカス可能な要素（通常は最初の入力フィールドまたは閉じるボタン）にフォーカスを移動
2.Tab / Shift+Tab はダイアログ内の要素間のみを循環（フォーカストラップ）
3.ダイアログを閉じたら、ダイアログを開いたトリガー要素にフォーカスを戻す

よくある間違い

  • フォーカストラップを実装せず、Tabキーでダイアログ外の要素にフォーカスが移る
  • ダイアログを閉じた後にトリガー要素にフォーカスを戻していない
  • Escapeキーでダイアログを閉じられない
  • aria-modal="true"を設定せず、背景のコンテンツがスクリーンリーダーで読み上げられる
  • ダイアログを開いた際に最初のフォーカス可能な要素にフォーカスしない
  • role="dialog"を設定していない

参考リンク