<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>
ダイアログを閉じることと、ダイアログを非表示にすることは異なります。 ダイアログを閉じると、戻り値が返されイベントが発生し、他のダイアログのページのブロックが解除されます。 一方、ダイアログの非表示は視覚的なプロパティの問題であり、 hidden属性を使用するかopen属性を削除することで実行されます。
ダイアログを開くことと、ダイアログを表示することは異なります。 ダイアログを開くということのなかには、そのダイアログを作成して表示することが含まれています。 一方、ダイアログの表示は視覚的なプロパティの問題であり、 DOM内のdialog要素を取得してユーザーに見えるようにします。
dialog要素には、tabindex属性を指定してはなりません。