<dialog>タグは、ダイアログボックスを表す際に使用します。
dialog要素は、アプリケーションがユーザーと対話するための情報を表します。
具体的には、アプリケーションが何らかのタスクを実行するための小さなウィンドウ（ダイアログボックス）です。
ダイアログボックスは、
ユーザーにメッセージを伝えたり、
ユーザーに入力などの操作を促したりする目的で表示されます。
開いたダイアログボックスは、
ユーザーがメッセージを読み終えたり入力などの作業を完了すると、
アプリケーションによって自動的に閉じられるか、ユーザーが手動で閉じることができます。
dialog要素にopen属性を指定すると、ダイアログボックスが開いた状態になります。
この状態は、dialog要素がアクティブでユーザーがdialog要素と対話できることを示します。
open属性が指定されていないdialog要素は、ユーザーに表示されません。
ダイアログでユーザーに入力などの操作を促す場合、
すぐに操作することが予想される子孫要素には、autofocus属性を指定する必要があります。
そのような子孫要素がない場合、dialog要素自体にautofocus属性を指定する必要があります。
ユーザーの期待に一致するように、どの要素にautofocus属性を指定するべきか検討します。
以下のサンプルは、製品管理ウェブアプリケーションという想定です。
dialog要素にopen属性を指定して、最初からダイアログが開くようにしています。
開いたダイアログでは、製品名の入力欄にautofocus属性を指定して、まずは製品名から入力するようユーザーに促しています。
<dialog open>
<label>製品名 <input type="text" autofocus></label>
<label>摘要 <input type="text"></label>
</dialog>
ダイアログのテキスト量が多い場合など、
内容がオーバーフローしてスクロールが発生することがあります。
例えば、ユーザーがフォントサイズをズーム設定にしていると、
制作者が意図していなくてもスクロールが発生する可能性があります。
一般的に、ユーザーはスクロールが必要なダイアログを好みません。
そのため、できるだけダイアログでスクロールが発生しないように配慮します。
以下のサンプルは、dialog要素を使用して利用規約をダイアログボックスで表示しています。
この際、スクロールが発生しにくいように、ダイアログボックスの高さをCSSで指定しています。
尚、div要素にautofocus属性を指定しているのは、もしスクロールが必要になった場合などに、
すぐに操作することが予想される子孫要素だからです。
<dialog open style="height: 60vh;">
<div style="overflow: auto; height: 50vh;" autofocus>
<h4>利用規約</h4>
<p>ユーザーは、自己の責任において本サービスを利用するものとします。</p>
<p>ユーザーは、本サービスのユーザーIDおよびパスワードを適切に管理するものとします。</p>
<p>ユーザーIDおよびパスワードを第三者に譲渡または貸与することはできません。</p>
<p>本サービスの利用によって生じた損害について、当社は一切の責任を負わないものとします。</p>
</div>
<form method="dialog">
<button type="submit" value="agree">同意する</button>
<button type="submit" value="disagree">同意しない</button>
</form>
</dialog>ユーザーは、自己の責任において本サービスを利用するものとします。
ユーザーは、本サービスのユーザーIDおよびパスワードを適切に管理するものとします。
ユーザーIDおよびパスワードを第三者に譲渡または貸与することはできません。
本サービスの利用によって生じた損害について、当社は一切の責任を負わないものとします。
「ダイアログを閉じる」と「ダイアログを非表示にする」は異なります。
ダイアログを閉じると、戻り値が返されイベントが発生し、他のダイアログのページのブロックが解除されます。
一方、ダイアログの非表示は、視覚的なプロパティの問題です。
ダイアログの非表示は、hidden属性を使用するか、open属性を削除することで実行されます。
「ダイアログを開く」と「ダイアログを表示する」は異なります。
ダイアログを開くことのなかには、そのダイアログを作成して表示することが含まれています。
一方、ダイアログの表示は、視覚的なプロパティの問題です。
ダイアログの表示は、DOM内のdialog要素を取得してユーザーに見えるようにすることです。
dialog要素には、tabindex属性を指定してはなりません。