モーダルダイアログ

モーダルダイアログとは？

モーダルダイアログは、画面の上に重なって開き、閉じるまで背面の操作をブロックする小さなウィンドウです。 設定パネル、フォーム、画像の拡大表示などに使われます。

モーダルで一番むずかしいのはフォーカスの管理です。 幸い、最近のブラウザのネイティブ <dialog> 要素をshowModal() で開けば、その大変な部分が標準で手に入ります。

なぜアクセシビリティが大事なの？

モーダルが正しくないと、こんな問題が起きます。

• キーボード利用者が Tab を押すと、開いているはずのダイアログを すり抜けて背面の見えない要素にフォーカスが移動してしまう（迷子になる）。
• Esc で閉じられない、閉じたあとにフォーカスがどこかへ飛ぶ。
• スクリーンリーダー利用者に、背面のコンテンツまで読めてしまい 「いまダイアログの中にいる」という状況が伝わらない。

ネイティブ <dialog> + showModal() は、これらすべて （フォーカストラップ・Escで閉じる・背面を inert 化・フォーカスの復帰）を 自動でやってくれます。

ライブデモ（推奨実装）

下の「設定を開く」を押すとダイアログが開きます。キーボードだけで操作して、Tab が外に漏れないこと・Esc で閉じることを確かめてください。

キーボード操作

必要な WAI-ARIA / ロール

実装：推奨パターン（Good）

マークアップ:

<button type="button" id="open">設定を開く</button>

<dialog id="dialog">
  <h2>表示設定</h2>
  <p>テーマやフォントサイズをここで変更できます。</p>
  <button type="button" id="close">閉じる</button>
</dialog>

開閉のスクリプト（たったこれだけ）:

const dialog = document.getElementById('dialog');
const openBtn = document.getElementById('open');
const closeBtn = document.getElementById('close');

// showModal() だけで、フォーカストラップ・Esc で閉じる・
// 背面を操作不可(inert)にする、が標準で手に入る。
openBtn.addEventListener('click', () => dialog.showModal());
closeBtn.addEventListener('click', () => dialog.close());

// 閉じたあとは、開いたトリガーへ自動でフォーカスが戻る。

アンチパターン（Bad）

下は <div> を重ねただけの自作モーダルです。マウスでは開閉できますが、開いたまま Tab を押すと フォーカスが背面に抜け、Esc でも閉じません。

<!-- ❌ div オーバーレイの自作モーダル -->
<button type="button" id="open">設定を開く</button>

<div id="overlay" class="overlay" style="display:none">
  <div class="modal">
    <h2>表示設定</h2>
    <p>テーマやフォントサイズをここで変更できます。</p>
    <!-- span なのでキーボードで閉じられない -->
    <span class="x" onclick="hide()">×</span>
  </div>
</div>

実装チェックリスト

• ネイティブ <dialog> を showModal() で開いている
• ダイアログに aria-labelledby（または aria-label）で名前がある
• 開くとフォーカスがダイアログ内へ移る
• Tab がダイアログ内だけを循環する（背面に漏れない）
• Esc で閉じる
• 閉じると開いたトリガーへフォーカスが戻る
• 背面が inert（操作・読み上げ不可）になっている
• フォーカスリングを消していない

原文（英語）:Dialog (Modal) Pattern — W3C APG（新しいタブで開きます）