Rôles des boîtes de dialogue et élément dialog natif
Identifiez une couche comme une véritable boîte de dialogue modale.
Rôles des boîtes de dialogue et élément dialog natif est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu’est-ce qui fait d’une boîte de dialogue une boîte de dialogue ?
Une boîte de dialogue est une couche qui interrompt la page pour demander une entrée ou afficher un message. Les utilisateurs de lecteurs d’écran doivent être informés qu’il s’agit d’une boîte de dialogue, et non d’un simple texte flottant.
Un div ressemble à une fenêtre modale, mais n’en est pas une
Un div stylisé peut ressembler à une fenêtre contextuelle, mais les technologies d’assistance y voient un contenu ordinaire. Sans le rôle approprié, les utilisateurs ne savent jamais qu’une boîte de dialogue s’est ouverte.
<div class="modal">Are you sure?</div>Découvrez l’élément dialog natif
L’élément dialog de HTML est conçu pour cette tâche. Il possède naturellement la sémantique d’une boîte de dialogue, afin que les lecteurs d’écran l’annoncent correctement.
<dialog>Are you sure?</dialog>Ouvrez-le comme une véritable fenêtre modale
Appelez showModal() en JavaScript pour ouvrir la boîte de dialogue comme une véritable fenêtre modale. C’est ce qui rend la page située derrière inerte et inaccessible.
document.querySelector("dialog").showModal();show() n’est pas modal
Attention : show() ouvre la boîte de dialogue sans mode modal, la page reste donc interactive derrière. Pour une boîte de dialogue bloquante, utilisez showModal().
dialog.show();Le rôle derrière dialog
En interne, l’élément correspond au rôle dialog. Si vous devez en créer un à partir d’un div, role="dialog" est l’attribut qui lui donne sa signification.
<div role="dialog">Settings</div>alertdialog pour les choix urgents
Lorsqu’une boîte de dialogue exige une réponse, par exemple pour confirmer une suppression, utilisez role="alertdialog". Cela signale une urgence particulière aux technologies d’assistance.
<div role="alertdialog">Delete this file?</div>Chaque boîte de dialogue a besoin d’un nom
Une boîte de dialogue doit avoir un nom accessible afin que les utilisateurs connaissent son objectif à l’ouverture. Faites pointer aria-labelledby vers le titre qu’elle contient.
<dialog aria-labelledby="t"><h2 id="t">Confirm</h2></dialog>Fermez-la dans le code
L’élément natif fournit une méthode close() correspondante. Son appel ferme la boîte de dialogue et permet à nouveau d’accéder à la page située derrière.
dialog.close();L’arrière-plan intégré
Une boîte de dialogue modale bénéficie gratuitement d’un arrière-plan que vous pouvez styliser avec le pseudo-élément ::backdrop. Il assombrit la page et indique que le focus a changé.
dialog::backdrop { background: rgba(0,0,0,0.5); }Pourquoi le natif vous simplifie la tâche
L’élément natif dialog gère pour vous le focus, la touche Échap et la mise en état inerte de l’arrière-plan. Le choisir signifie moins de bogues qu’avec un div créé manuellement.
Vérification rapide
Vous voulez une fenêtre de confirmation qui bloque la page jusqu’à la réponse de l’utilisateur. Quel appel devez-vous utiliser ?
Récapitulatif : utilisez de vraies boîtes de dialogue
Vous avez appris qu’une fenêtre modale a besoin de la sémantique d’une boîte de dialogue. Privilégiez la boîte de dialogue native avec showModal(), donnez-lui un nom et réservez alertdialog aux choix urgents.
Questions Fréquemment Posées
La leçon « Rôles des boîtes de dialogue et élément dialog natif » est-elle gratuite ?
Oui — le texte complet de « Rôles des boîtes de dialogue et élément dialog natif » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Rôles des boîtes de dialogue et élément dialog natif » ?
Identifiez une couche comme une véritable boîte de dialogue modale. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Rôles des boîtes de dialogue et élément dialog natif » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Rôles des boîtes de dialogue et élément dialog natif
- Piéger le focus dans la fenêtre modale
- Échap pour fermer et rendre le focus
- Arrière-plan inerte et aria-modal