アクセシブル モーダルダイアログ
このモーダルダイアログは、操作の確認などで画面中央に重ねて表示する小窓を、アクセシビリティに配慮して組んだ部品です。背景のオーバーレイは position: fixed で全面を覆い、開いている状態を is-open クラスで切り替えて opacity と pointer-events を制御します。
解説
このモーダルダイアログは、操作の確認などで画面中央に重ねて表示する小窓を、アクセシビリティに配慮して組んだ部品です。背景のオーバーレイは position: fixed で全面を覆い、開いている状態を is-open クラスで切り替えて opacity と pointer-events を制御します。本体には role="dialog" と aria-modal="true" を付け、aria-labelledby で見出しと結び付けて、支援技術にも「これは独立した対話領域だ」と正しく伝わるようにしています。
こんな場面で使う
- 削除や送信など、取り消せない操作の最終確認
- ログインや簡単な入力フォームの呼び出し
- お知らせや利用同意の表示
開閉はボタンとオーバーレイのクリックに加え、Escape キーでも閉じられるようキー操作を監視しています。開いた直後は閉じるボタンへ、閉じた後は元の起動ボタンへフォーカスを戻し、操作の流れを途切れさせません。さらに堅牢にするなら、背後の要素へフォーカスが逃げないようダイアログ内に閉じ込める処理や、開いている間の背景スクロール抑止を足すと、より完成度が上がります。
使用例・適したシーン
- 利用規約・プライバシーポリシー表示
- 画像拡大表示
- 確認ダイアログ
よくある質問
Escape キーや背景クリックで閉じられますか
どちらも対応しています。背景の暗い部分をクリックしたとき、または Escape キーを押したときに閉じる処理が入っているので、利用者は直感的に画面を離れられます。
アクセシビリティ面でさらに足すべきことはありますか
より丁寧にするなら、開いている間にキーボードのフォーカスをダイアログ内に閉じ込める仕組みと、背景のスクロールを止める処理を加えるとよいです。読み上げ環境での迷子を防げます。