アクセシブルモーダルダイアログ

解説

これは、ボタンを押すと中央に重ねて開くアクセシブルなモーダルダイアログです。土台のダイアログには role="dialog" と aria-modal="true"、見出しと紐づける aria-labelledby を付け、支援技術にも「いま専用の対話画面が開いた」ことが伝わります。開閉は hidden 属性の付け外しで行い、開いたときは閉じるボタンへ、閉じたときは元のボタンへフォーカスを戻すため、キーボード利用者が迷子になりません。背景の暗幕（バックドロップ）や閉じるボタン、キャンセルのいずれを押しても閉じられます。

向いている場面

• 確認・同意を求めるダイアログや削除前の最終確認
• 問い合わせフォームやログインを画面遷移なしで出したいとき
• 画像の拡大表示や規約の確認といった一時的な情報提示

中身は見出しと本文、ボタンを差し替えるだけで流用できます。実運用では、開いている間は Escape キーで閉じる処理と、フォーカスがモーダル外へ逃げないフォーカストラップを加えるとさらに堅牢です。背後のページがスクロールしないよう、開いている間は本文の overflow を止める配慮も有効です。フォーカス管理を丁寧に行うことが、見た目以上に使い勝手を左右します。

使用例・適したシーン

• 利用規約・プライバシーポリシー表示
• 画像拡大表示
• 確認ダイアログ