`<dialog>`: ダイアログ要素

<dialog>: ダイアログ要素

• 標準提供: <dialog> 要素は、モーダルまたは非モーダルのダイアログ、アラート、インスペクター、サブウィンドウなどの対話型要素を表します。2022年3月以降、ほとんどのブラウザーで利用できます。

属性

• open: ダイアログがアクティブで、操作可能であることを示します。open 属性が設定されていない場合、ユーザーには表示されません。.show() または .showModal() メソッドを使用することが推奨されます。

使用上の注意

• HTML の <form> 要素は、method="dialog" 属性を使用してダイアログを閉じることができます。
• CSS ::backdrop 疑似要素を使用して、モーダルダイアログの背景をスタイル設定できます。
• autofocus 属性は、ダイアログが開いたときにすぐ操作させたい要素に追加する必要があります。
• <dialog> 要素に tabindex 属性を追加しないよう注意する必要があります。

アクセシビリティ

• ダイアログを実装する際は、ユーザーのフォーカスを適切に設定することが重要です。
• showModal() メソッドを使用してダイアログを開くと、フォーカスは最初のフォーカス可能要素に設定されます。
• すべてのユーザーがダイアログを閉じられるように、明示的なボタンを含めるのが最も確実な方法です。

例

HTML のみのダイアログ

• HTML だけで非モーダルダイアログを作成する例です。open 属性により、ページ読み込み時にダイアログが開いています。

モーダルダイアログの作成

• .showModal() メソッドを使用してモーダルダイアログを開く例です。Esc キー、またはダイアログ内の "Close" ボタンで閉じることができます。

ダイアログの戻り値の処理

• <dialog> 要素の returnValue を使用する例です。フォームを使ってモーダルダイアログを閉じることができます。

必須フォーム入力があるダイアログを閉じる

• ダイアログ内部のフォームに必須入力がある場合、formnovalidate 属性を使用して閉じることができます。

ダイアログのアニメーション

• <dialog> 要素の display 属性をアニメーション化して、ダイアログにアニメーションを適用できます。

技術概要

• コンテンツカテゴリ: フローコンテンツ、セクショニングルート
• 許可されるコンテンツ: フローコンテンツ
• 暗黙的な ARIA ロール: dialog
• DOM インターフェース: HTMLDialogElement

仕様

• HTML Standard # the-dialog-element

ブラウザー互換性

• 主要なほとんどのブラウザーで、<dialog> 要素と open 属性が完全にサポートされています。

参考

• HTMLDialogElement インターフェース
• HTMLDialogElement の close および cancel イベント
• HTMLDialogElement の open 属性
• HTML 要素の inert グローバル属性
• CSS ::backdrop 疑似要素