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

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

ダイアログは、Web 上でもネイティブ アプリケーションでも、アプリケーションに追加される一般的なコンポーネントです。従来、これらを Web 上に実装する標準的な方法は存在せず、その結果、さまざまな Web アプリケーション間で一貫して動作しないアドホックな実装が多く発生していました。多くの場合、一般的に期待される機能は、実装の複雑さのためにダイアログに欠落しています。

ただし、Web ブラウザでは標準のダイアログ要素が提供されるようになりました。

なぜダイアログ要素を使用するのでしょうか?

ネイティブ ダイアログ要素は、ダイアログ、モーダル、およびその他の種類の非モーダル ダイアログの実装を合理化します。これは、ブラウザにすでに組み込まれているダイアログに必要な機能の多くを実装することで実現されます。

これは、対話に関するユーザーの期待が確実に満たされるようにすることで、アプリケーションをアクセシブルにする際の開発者の負担を軽減するのに役立ちます。また、ダイアログの実装全般を簡素化できる可能性もあります。

基本的な使い方

新しい

を使用してダイアログを追加します。タグはわずか数行のコードで実現できます。

<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() メソッドを呼び出すか、Esc キーを押して閉じます。また、ページの残りの部分を暗くして操作を妨げる背景がどのように表示されるかにも注意してください。素敵です!

アクセシビリティとフォーカス管理

Web アプリケーションをすべてのユーザーがアクセスできるようにする場合、フォーカスを正しく処理することが重要です。通常、ダイアログを表示するときは、現在のフォーカスをアクティブなダイアログに移動する必要がありますが、ダイアログ要素を使用すると自動的に実行されます。

デフォルトでは、フォーカスはダイアログ内の最初のフォーカス可能な要素に設定されます。必要に応じて、フォーカスを開始する要素に autofocus 属性を設定することで、最初にフォーカスを受け取る要素を変更できます。これは、その属性が閉じる <ボタン> に追加された前の例で見られるように、要素。

.showModal() メソッドを使用してダイアログを開くと、ダイアログ ARIA ロールがダイアログ要素に暗黙的に追加されます。これにより、スクリーン リーダーがモーダルが表示されたことを理解し、画面がそれに応じて動作できるようになります。

ダイアログへのフォームの追加

フォームはダイアログに追加することもでき、フォーム用の特別なメソッド値もあります。

を追加すると、メソッドをダイアログに設定した要素を使用すると、フォームは標準のフォームの取得および投稿メソッドとは異なるいくつかの異なる動作をします。

まず、この新しいメソッドでは外部 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 サイトの他の関連記事を参照してください。