HTML ダイアログ要素: アクセシビリティと使いやすさの向上

まず、この新しいメソッドでは外部 HTTP リクエストは行われません。代わりに、フォームが送信されると、form 要素の returnValue プロパティがフォームの送信ボタンの値に設定されます。

次のサンプルフォームを考えてみます:

<dialog>



<p>However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it.<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('example-dialog').showModal();

サーバーから目的の応答が返されたら、ダイアログで .close() メソッドを使用して手動で応答を閉じることができます。

背景を強化する

ダイアログの背後の背景は、デフォルトではほぼ半透明の灰色の背景です。ただし、その背景は ::backdrop 擬似要素を使用して完全にカスタマイズできます。これを使用すると、背景色をグラデーションや画像などを含む任意の値に設定できます。

これは一般的に実装されている機能であるため、背景をクリックしてモーダルを閉じるようにすることもできます。デフォルトでは、<ダイアログ>要素がこれを行うわけではありません。これを機能させるためにダイアログにいくつかの変更を加えることができます。

まず、ユーザーがいつクリックしてダイアログから離れたかを知るために、イベント リスナーが必要です。

<form>



<p>The form element with the example-form id will have its returnValue set to Submit.</p>

<p>In addition to that, the dialog will close immediately after the submit event is done being handled, though not before automatic form validation is done. If this fails then the invalid event will be emitted.</p>

<p>You may have already noticed one caveat to all of this. You might not want the form to close automatically when the submit handler is done running. If you perform an asynchronous request with an API or server you may want to wait for a response and show any errors that occur before dismissing the dialog.</p>

<p>In this case, you can call event.preventDefault() in the submit event listener like so:<br>
</p>

<pre class="brush:php;toolbar:false">exampleForm.addEventListener('submit', (event) => {
  event.preventDefault();
});

このイベント リスナーだけでは奇妙に見えます。背景ではなく、ダイアログがクリックされるたびにダイアログが閉じられるようです。それは私たちがやりたいこととは真逆です。残念ながら、背景のクリック イベントはダイアログ自体の一部とみなされているため、リッスンすることはできません。このイベント リスナーを単独で追加すると、ページ上の任意の場所をクリックするとダイアログが事実上閉じられるようになります。
これを修正するには、ダイアログを効果的にマスクし、代わりにクリックを受け取る別の要素でダイアログのコンテンツをラップする必要があります。単純な

dialog.addEventListener('click', (event) => {
  if (event.target === dialog) {
    dialog.close();
  }
});

ラッピング div をインラインブロック要素にしてマージンを含めることができ、パディングを親ダイアログからラッパーに移動することで、ダイアログのパディング部分で行われたクリックが代わりにラッパー要素と対話するようになります。却下されないようにします。

結論

dialog 要素を使用すると、合理的なデフォルト動作で実装が簡素化され、自動 ARIA ロール割り当て、フォーム要素のカスタマイズされたサポート、および柔軟な機能を使用してスクリーン リーダーなどの支援技術を必要とするユーザーのアクセシビリティが向上するため、ダイアログとモーダルの作成に大きな利点が得られます。スタイリングオプション。

以上がHTML ダイアログ要素: アクセシビリティと使いやすさの向上の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。