<article lang="ja"><header><h1>&lt;dialog&gt;: ダイアログ要素</h1><details><summary><span role="img" aria-label="Baseline Check"></span><h2>Baseline <span>2022</span></h2><div>Newly available</div><div><span title="Supported in Chrome and Edge"><span role="img" aria-label="Chrome check"></span><span role="img" aria-label="Edge check"></span></span><span title="Supported in Firefox"><span role="img" aria-label="Firefox check"></span></span><span title="Supported in Safari"><span role="img" aria-label="Safari check"></span></span></div><span></span></summary><div><p>Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.</p><ul><li><a data-glean="baseline_link_learn_more">Learn more</a></li><li><a data-glean="baseline_link_bcd_table">See full compatibility</a></li><li><a data-glean="baseline_link_feedback">Report feedback</a></li></ul></div></details></header><div><p><strong><code><dialog></dialog></code></strong> は <a>HTML</a> の要素で、ダイアログボックスや、消すことができるアラート、インスペクター、サブウィンドウ等のような対話的コンポーネントを表します。</p></div><section aria-labelledby="属性"><h2><a>属性</a></h2><div><p>この要素には<a>グローバル属性</a>があります。</p>
<div>
  <p><strong>警告:</strong> <code>tabindex</code> 属性を <code><dialog></dialog></code> 要素で使用してはいけません。</p>
</div>
<dl>
  <dt><a><code>open</code></a></dt>
  <dd>
    <p>
      ダイアログがアクティブで操作で使用できることを示します。 <code>open</code> 属性が設定されていないときは、ダイアログはユーザーに表示する<em>べきではありません</em>。
      ダイアログを表示するには、<code>open</code> 属性ではなく <code>.show()</code> または <code>.showModal()</code> メソッドを使用することが推奨されます。もし <code><dialog></dialog></code> が <code>open</code> 属性を使用して開かれた場合、そのダイアログはモーダルになりません。
    </p>
  </dd>
</dl></div></section><section aria-labelledby="アクセシビリティの考慮"><h2><a>アクセシビリティの考慮</a></h2><div><p>モーダルダイアログの作成には、HTMLネイティブの <code><dialog></dialog></code> 要素を使用しましょう。これは、ユーザビリティとアクセシビリティの機能を提供するためで、他の要素を同様の目的で使用する場合は、それを再現しなければなりません。ダイアログを表示するには、<code>.showModal()</code> または <code>.show()</code> メソッドのうち適切な方を使用してください。独自のダイアログの実装を作成する場合は、期待される既定の動作にすべて対応していること、適切なラベル付けが行われていることを確認してください。</p>
<p>ダイアログを実装する際には、ユーザーのフォーカスを設定する場所として最も適切な場所を検討することが重要です。<a>autofocus</a> 属性を使用して初期フォーカスの配置を明確に示すと、特定のダイアログに対して最適な初期フォーカスの配置とみなされる要素に初期フォーカスが設定するのに役立ちます。ダイアログの初期フォーカスがどこに設定されるか常にわからない場合、特にダイアログのコンテンツが呼び出されたときに動的に描画される場合、必要であれば <code><dialog></dialog></code> 要素そのものにフォーカスを当てることが、初期フォーカスの配置として最適と判断されるかもしれません。<code><dialog></dialog></code> を開くための<a><code>HTMLDialogElement.showModal()</code></a>を使用すると、最初にネストしたフォーカス可能な要素にフォーカスが設定されます。</p>
<p>ユーザーがダイアログを閉じることができる機構を確実に用意してください。すべてのユーザーが確実にダイアログを閉じることができるようにする最も確実な方法は、閉じるための明確なボタンを記載することです。例えば、確認、キャンセル、閉じるなどのボタンが適切です。また、キーボードを使用する端末では、<kbd>Esc</kbd> キーでモーダルダイアログも閉じられると考えるのが一般的です。既定では、<code>showModal()</code> メソッドによって呼び出された <code><dialog></dialog></code> は、<kbd>Esc</kbd> によって閉じることができます。非モーダルダイアログでは、既定では <kbd>Esc</kbd> キーで閉じませんし、非モーダルダイアログが表すものによっては、この動作が望ましくない場合があります。複数のモーダルダイアログが開いている場合、<kbd>Esc</kbd> は最後に示されたダイアログのみを閉じるようにします。<code><dialog></dialog></code> を使用した場合、この動作はブラウザーによって提供されます。</p>
<p><code><dialog></dialog></code> 要素は、ARIA の <a>role="dialog"</a> 属性を使用したカスタムダイアログと同じような形で、ブラウザーが提供します。<code><dialog></dialog></code> 要素が <code>showModal()</code> メソッドで呼び出された場合、暗黙のうちに <a title="このページは現在、英語のみで利用可能です。">aria-modal="true"</a> となり、一方 <code><dialog></dialog></code> が <code>show()</code> メソッド、または <code>open</code> 属性を使用して表示されたり <code><dialog></dialog></code> の既定の <code>display</code> を変更した場合は <code>[aria-modal="false"]</code> として表示されます。モーダルダイアログを実装する際には、<code><dialog></dialog></code> とそのコンテンツ以外は <a><code>inert</code></a> 属性を使って不活性化する必要があります。<code><dialog></dialog></code> を <code>HTMLDialogElement.showModal()</code> メソッドで使用した場合、この動作はブラウザーが提供します。</p></div></section><section aria-labelledby="使用上の注意"><h2><a>使用上の注意</a></h2><div><ul>
  <li><a><code><form></form></code></a> 要素は <code>method="dialog"</code> 属性が指定されていれば、ダイアログを閉じることができます。そのようなフォームが送信されると、 <a title="returnValue"><code>returnValue</code></a> プロパティにフォーム送信するために使用されたボタンの <code>value</code> が設定されて、ダイアログが閉じられます。</li>
  <li>CSS の <a><code>::backdrop</code></a> 擬似要素を使用して、 <code><dialog></dialog></code> 要素が <a><code>HTMLDialogElement.showModal()</code></a> で表示されたときの背後のスタイルを設定することができます。例えば、モーダルダイアログの背後にある操作できないコンテンツを暗くするなどです。</li>
</ul></div></section><section aria-labelledby="例"><h2><a>例</a></h2><div></div></section><section aria-labelledby="シンプルな例"><h3><a>シンプルな例</a></h3><div><p>以下は、非モーダル、つまりモーダルレスなダイアログを表示します。"OK" ボタンは、起動時にダイアログを閉じられるようになっています。</p>
<div><div><span>html</span></div><pre data-signature="pyNIZ2FRkQ0lF2puOc9mOyM0N5EGixmK3+Oo9MoGK7Y="><code><dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>
</code></pre></div>
<h4>結果</h4><div><div></div><iframe title="シンプルな例" width="100%" height="200" sandbox="allow-same-origin allow-scripts"></iframe></div>
<p>このダイアログは <code>open</code> 属性によって開かれたので、モーダルではありません。この例では、ダイアログが閉じられたとき、それを再び開くためのメソッドは提供されていません。<a><code>HTMLDialogElement.show()</code></a> でダイアログを開く方が、論理属性の <code>open</code> 属性を切り替えるより望ましいです。</p></div></section><section aria-labelledby="高度な例"><h3><a>高度な例</a></h3><div><p>この例では、"Show the dialog" ボタンをクリックすると、モーダルダイアログを開きます。ダイアログには <a><code><select></select></code></a> と 2 つの <a><code><button></button></code></a> 要素があり、これらは <code>type="submit"</code> に既定値として設定されています。<code><select></select></code> の値を更新すると、「確認」ボタンの値も更新されます。この値は <a><code>returnValue</code></a> です。<kbd>Esc</kbd>キーでダイアログが閉じられた場合、返値はありません。ダイアログが閉じられた場合、返値は「ダイアログを表示」ボタンの下に表示されます。</p>
<h4>HTML</h4>
<div><div><span>html</span></div><pre data-signature="GDwiGhYmeBA9eI1iW+t5agfYUEgtfjW7AgjGyeG4FsY="><code>
<dialog>
  <form>
    <p>
      <label>
        Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button>Show the dialog</button>
</p>
<output></output>
</code></pre></div>
<h4>JavaScript</h4>
<div><div><span>js</span></div><pre data-signature="nBU/P7/W3KGP0jS2QeAZk0o9/tHSvYw4Yqln1TEe1Iw="><code>const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

// "Show the dialog" ボタンで <dialog> をモーダルに開く
showButton.addEventListener("click", () => {
  favDialog.showModal();
});

// "Favorite animal" 入力で、送信ボタンの値を設定する
selectEl.addEventListener("change", (e) => {
  confirmBtn.value = selectEl.value;
});

// "Cancel" ボタンで [formmethod="dialog"] による送信を行わずにダイアログを閉じ、close イベントを発行する
favDialog.addEventListener("close", (e) => {
  outputBox.value =
    favDialog.returnValue === "default"
      ? "No return value."
      : `ReturnValue: ${favDialog.returnValue}.`; // 空文字列ではなく、既定値かどうかを調べる必要がある
});

// ［確認］ボタンが既定でフォームを送信しないようにし、`close()` メソッドでダイアログを閉じ、"close" イベントを発生させる
confirmBtn.addEventListener("click", (event) => {
  event.preventDefault(); // この偽フォームを送信しない
  favDialog.close(selectEl.value); // ここで選択ボックスの値を送る必要がある
});
</dialog></code></pre></div></div></section><section aria-labelledby="結果_2"><h3><a>結果</a></h3><div><div><div></div><iframe title="例" width="100%" height="300" sandbox="allow-same-origin allow-scripts"></iframe></div>
<p>
  このモーダルダイアログは、3 つの方法で閉じることができます。キーボードユーザーの場合、モーダルダイアログは <kbd>Esc</kbd> キーで閉じることができます。この例では、［キャンセル］ボタンは <code>dialog</code> フォームメソッドで、［確認］ボタンは <a><code>HTMLDialogElement.close()</code></a> メソッドでダイアログを閉じます。
  ［キャンセル］ボタンには <a><code>formmethod="dialog"</code></a> が含まれており、 <a><code><form></form></code></a> の既定の <a><code>GET</code></a> メソッド (<a><code>method</code></a>) を上書きします。フォームのメソッドが <a><code>dialog</code></a> の場合、フォームの状態は送信されずに保存され、ダイアログは閉じられます。
  <code>action</code> がない場合、既定の <a><code>GET</code></a> メソッドでフォームを送信すると、ページの再読み込みが発生します。JavaScript を使用して、送信を阻止し、ダイアログを閉じるために、それぞれ <a><code>event.preventDefault()</code></a> と <a><code>HTMLDialogElement.close()</code></a> メソッドを使用しています。
</p>
<p>すべての <code>dialog</code> 要素に閉じるための仕組みを提供することが重要です。既定では、非モーダルのダイアログは <kbd>Esc</kbd> キーでは閉じませんし、ユーザーが物理キーボードにアクセスすることも想定してはいけません（たとえば、キーボードにアクセスできないタッチスクリーン端末を使用している人もいます）。</p></div></section><section aria-labelledby="技術的概要"><h2><a>技術的概要</a></h2><div><figure><table>
  <tbody>
    <tr>
      <th scope="row"><a>コンテンツカテゴリー</a></th>
      <td>
        <a>フローコンテンツ</a>,
        <a>区分化ルート</a>
      </td>
    </tr>
    <tr>
      <th scope="row">許可された内容</th>
      <td><a>フローコンテンツ</a></td>
    </tr>
    <tr>
      <th scope="row">タグの省略</th>
      <td>なし。開始タグと終了タグの両方が必須です。</td>
    </tr>
    <tr>
      <th scope="row">許可された親要素</th>
      <td><a>フローコンテンツ</a>を受け入れるあらゆる要素</td>
    </tr>
    <tr>
      <th scope="row">暗黙の ARIA ロール</th>
      <td><a>dialog</a></td>
    </tr>
    <tr>
      <th scope="row">許可された ARIA ロール</th>
      <td><a><code>alertdialog</code></a></td>
    </tr>
    <tr>
      <th scope="row">DOM インターフェイス</th>
      <td><a><code>HTMLDialogElement</code></a></td>
    </tr>
  </tbody>
</table></figure></div></section><h2><a>仕様書</a></h2><table><thead><tr><th scope="col">Specification</th></tr></thead><tbody><tr><td><a>HTML Standard <br><small># the-dialog-element</small></a></td></tr></tbody></table><h2><a>ブラウザーの互換性</a></h2><p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p><section aria-labelledby="関連情報"><h2><a>関連情報</a></h2><div><ul>
  <li><a title="close"><code>close</code></a> イベント</li>
  <li><a title="cancel"><code>cancel</code></a> イベント</li>
  <li><a>HTML フォームガイド</a></li>
  <li><a><code>::backdrop</code></a> 擬似要素</li>
  <li><a>dialog-polyfill</a></li>
</ul></div></section></article>

閉じるための明確なボタンを設けること

ダイアログをクリックすること

タッチスクリーンでスワイプすること

ユーザーのフォーカスを適切に設定すること

ダイアログの色を鮮やかにすること

ダイアログのサイズを大きくすること

ダイアログを常に表示すること

ダイアログ内のボタンを使用する

他のウィンドウをクリックすること

ダイアログボックスやアラートなどの対話的コンポーネント

テキストを強調するための要素

スタイルを適用するための要素