L'élément de dialogue HTML : améliorer l'accessibilité et la facilité d'utilisation

L'élément de dialogue HTML : améliorer l'accessibilité et la facilité d'utilisation

Les boîtes de dialogue sont un composant courant ajouté aux applications, que ce soit sur le Web ou dans les applications natives. Traditionnellement, il n’existe pas de méthode standard pour les implémenter sur le Web, ce qui entraîne de nombreuses implémentations ad hoc qui n’agissent pas de manière cohérente entre les différentes applications Web. Souvent, les fonctionnalités généralement attendues sont absentes des boîtes de dialogue en raison de la complexité de leur mise en œuvre.

Cependant, les navigateurs Web proposent désormais un élément de dialogue standard.

Pourquoi utiliser l'élément de dialogue ?

L'élément de dialogue natif rationalise la mise en œuvre des dialogues, des modaux et d'autres types de dialogues non modaux. Pour ce faire, il implémente de nombreuses fonctionnalités nécessaires aux boîtes de dialogue qui sont déjà intégrées au navigateur.

Cela est utile car cela réduit la charge du développeur lorsqu'il s'agit de rendre ses applications accessibles en garantissant que les attentes des utilisateurs concernant l'interaction sont satisfaites, et cela peut également potentiellement simplifier la mise en œuvre des boîtes de dialogue en général.

Utilisation de base

Ajout d'une boîte de dialogue à l'aide du nouveau

la balise peut être réalisée avec seulement quelques lignes de code.

<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();

Ensuite, si vous souhaitez le fermer, vous pouvez appeler la méthode .close() dans la boîte de dialogue, ou appuyer sur la touche d'échappement pour la fermer, tout comme la plupart des autres modaux fonctionnent. Notez également comment apparaît un arrière-plan qui assombrit le reste de la page et vous empêche d'interagir avec elle. Propre !

Gestion de l’accessibilité et de la concentration

Gérer correctement le focus est important pour rendre vos applications Web accessibles à tous les utilisateurs. En règle générale, vous devez déplacer le focus actuel vers la boîte de dialogue active lors de leur affichage, mais avec l'élément de boîte de dialogue qui est fait pour vous.

Par défaut, le focus sera placé sur le premier élément focalisable dans la boîte de dialogue. Vous pouvez éventuellement modifier l'élément qui reçoit le focus en premier en définissant l'attribut de mise au point automatique sur l'élément sur lequel vous souhaitez que le focus commence, comme le montre l'exemple précédent où cet attribut a été ajouté au élément.

L'utilisation de la méthode .showModal() pour ouvrir la boîte de dialogue ajoute également implicitement le rôle ARIA de boîte de dialogue à l'élément de boîte de dialogue. Cela aide les lecteurs d'écran à comprendre qu'un modal est apparu et à l'écran afin qu'il puisse agir en conséquence.

Ajout de formulaires aux boîtes de dialogue

Des formulaires peuvent également être ajoutés aux boîtes de dialogue, et il existe même une valeur de méthode spéciale pour eux. Si vous ajoutez un élément avec la méthode définie sur dialog, le formulaire aura des comportements différents qui diffèrent des méthodes standard get et post form.

Tout d’abord, aucune requête HTTP externe ne sera effectuée avec cette nouvelle méthode. Ce qui se passera à la place, c'est que lorsque le formulaire sera soumis, la propriété returnValue sur l'élément du formulaire sera définie sur la valeur du bouton de soumission dans le formulaire.

Donc, étant donné cet exemple de formulaire :

<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();

Une fois la réponse souhaitée renvoyée du serveur, vous pouvez la fermer manuellement en utilisant la méthode .close() dans la boîte de dialogue.

Améliorer la toile de fond

La toile de fond derrière la boîte de dialogue est par défaut un fond gris principalement translucide. Cependant, cette toile de fond est entièrement personnalisable à l’aide du pseudo-élément ::backdrop. Avec lui, vous pouvez définir une couleur d'arrière-plan sur n'importe quelle valeur de votre choix, y compris des dégradés, des images, etc.

Vous souhaiterez peut-être également que le fait de cliquer sur l'arrière-plan fasse disparaître le modal, car il s'agit d'une fonctionnalité couramment implémentée chez eux. Par défaut, le element ne fait pas cela pour nous. Nous pouvons apporter quelques modifications à la boîte de dialogue pour que cela fonctionne.

Tout d'abord, un écouteur d'événement est nécessaire pour que nous sachions quand l'utilisateur clique en dehors de la boîte de dialogue.

<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();
});

Seul, cet auditeur d'événement semble étrange. Il semble fermer la boîte de dialogue chaque fois que vous cliquez sur la boîte de dialogue, pas sur l'arrière-plan. C’est le contraire de ce que nous voulons faire. Malheureusement, vous ne pouvez pas écouter un événement de clic sur l'arrière-plan car il est considéré comme faisant partie de la boîte de dialogue elle-même. L'ajout de cet écouteur d'événement en lui-même fera effectivement fermer la boîte de dialogue en cliquant n'importe où sur la page.
Pour corriger cela, nous devons envelopper le contenu de la boîte de dialogue avec un autre élément qui masquera efficacement la boîte de dialogue et recevra le clic à la place. Un simple élément

peut faire l'affaire !

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

Le div d'emballage peut être transformé en un élément de bloc en ligne pour contenir la marge, et en déplaçant le remplissage de la boîte de dialogue parent vers le wrapper, les clics effectués dans les parties remplies de la boîte de dialogue interagiront désormais avec l'élément wrapper à la place. en s'assurant qu'il ne sera pas rejeté.

Conclusion

L'utilisation de l'élément de dialogue offre des avantages significatifs pour la création de boîtes de dialogue et de modaux en simplifiant la mise en œuvre avec un comportement par défaut raisonnable, en améliorant l'accessibilité pour les utilisateurs qui ont besoin de technologies d'assistance telles que les lecteurs d'écran en utilisant l'attribution automatique de rôles ARIA, une prise en charge personnalisée des éléments de formulaire et une flexibilité options de style.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!