モーダルダイアログ（アクセシビリティ対応）
このモーダルは、画面全体を半透明の黒で覆い、その中央に確認用のダイアログを浮かせる部品です。アクセシビリティを意識した作りで、オーバーレイには role="dialog" と aria-modal="true" 、見出しと内容を結ぶ aria-labelledby を指定しています。
解説
このモーダルは、画面全体を半透明の黒で覆い、その中央に確認用のダイアログを浮かせる部品です。アクセシビリティを意識した作りで、オーバーレイには role="dialog" と aria-modal="true"、見出しと内容を結ぶ aria-labelledby を指定しています。JavaScript は開閉のクラス付け外しに加え、開いた瞬間にダイアログへフォーカスを移し、背景クリックや閉じるボタン、さらに Escape キーでも閉じられるようにしています。表示は position:fixed と inset:0 で全面を覆い、登場時には @keyframes による軽いアニメーションが付きます。
使う場面
- 削除や送信など、取り消しできない操作の確認ダイアログ
- ログインや問い合わせなど、その場で完結させたい入力フォーム
- お知らせや注意事項を一度だけ前面に出したいとき
幅は max-width で、背景の暗さは rgba の透明度で調整します。注意点として、開いている間は背景のスクロールを止めたり、フォーカスがダイアログ外へ逃げないようにする処理を足すと、より使いやすくなります。
使用例・適したシーン
- 利用規約・プライバシーポリシー表示
- 画像拡大表示
- 確認ダイアログ
よくある質問
背景をクリックしたら閉じる動作をやめられますか
オーバーレイ自身のクリックで閉じる処理を外せば、背景クリックで閉じなくなります。閉じる手段としては、ボタンと Escape キーを残しておくと操作に困りません。
Escape キーで閉じられますか
キー入力を監視していて、Escape が押されると開いているモーダルを閉じます。確認ダイアログとして、ボタン・背景クリック・キーの 3 通りで閉じられます。