Simplifiez vos modales avec l’élément <dialog>
Publié le
Oubliez les z-index, les display: none; et les aria-hidden. L'élément HTML <dialog> est conçu pour faciliter la création de boîtes de dialogue personnalisées et accessibles. En offrant une solution native et sémantique, il contribue à améliorer la qualité des interactions avec l'utilisateur.
Dans cet article, nous allons découvrir comment utiliser <dialog> pour créer des modales conformes aux normes d'accessibilité.
Qu'est-ce que l'élément dialog ?
L'élément <dialog> est une fonctionnalité native d'HTML5 qui vous permet de créer des boîtes de dialogue personnalisées de manière simple et intuitive. Imaginez une petite fenêtre qui s'ouvre par-dessus votre contenu pour afficher un message important, demander une confirmation ou collecter des informations. C'est exactement ce que permet de faire <dialog>
Pour contrôler l'affichage, JavaScript propose trois méthodes principales : show() et showModal() pour ouvrir la boîte de dialogue, close() pour la fermer.
show vs. showModal : Quelle différence ?
show() : Une fenêtre non modale
- Lorsque vous utilisez
show(), le<dialog>s'affiche sans bloquer le reste de la page. L'utilisateur peut continuer à interagir avec les autres éléments de la page tout en ayant la boîte de dialogue ouverte. - Cette méthode est idéale pour les boîtes de dialogue qui fournissent des informations supplémentaires sans interrompre le flux de travail de l'utilisateur, comme un panneau d'options ou un menu contextuel.
showModal() : Une fenêtre modale
- En utilisant
showModal(), le<dialog>prend le contrôle exclusif de la page. Le reste de la page est désactivé et l'utilisateur ne peut interagir qu'avec les éléments à l'intérieur de la boîte de dialogue. - Cette méthode est adaptée aux situations où vous avez besoin d'une réponse immédiate de l'utilisateur ou lorsque vous voulez attirer son attention sur un message important, comme une boîte de confirmation de suppression ou une fenêtre de login.
Attention à l'attribut open
Bien que l'élément <dialog> puisse être ouvert en utilisant l'attribut HTML open,
cette approche est déconseillée car elle contourne les comportements natifs essentiels de l'élément :
❌ À éviter
<dialog open>
✅ Recommandé
dialog.showModal()
Privilégiez toujours l'utilisation de showModal() pour ouvrir vos boîtes de dialogue
et garantir une expérience utilisateur optimale et accessible.
Accessibilité
L'accessibilité avec aria-modal
Lors de l'utilisation de showModal(), l'élément <dialog> reçoit automatiquement
l'attribut aria-modal="true". Cette gestion native de l'accessibilité informe les technologies
d'assistance que le contenu en dehors de la boîte de dialogue est inactif.
Cet attribut, combiné à la gestion automatique du focus et de la navigation au clavier, fait de
<dialog> un choix idéal pour créer des interfaces modales accessibles sans configuration supplémentaire.
Gestion du focus
La gestion appropriée du focus est cruciale pour l'accessibilité des boîtes de dialogue modales. L'élément
<dialog> offre plusieurs options pour contrôler le focus :
L'attribut autofocus peut être utilisé de deux manières :
- Sur le
<dialog>lui-même pour maintenir le focus dans la boîte de dialogue - Sur un élément spécifique à l'intérieur (comme un bouton "Fermer" ou un champ de formulaire principal)
Cette gestion du focus garantit que :
- Les utilisateurs de clavier peuvent naviguer efficacement dans la boîte de dialogue
- Les lecteurs d'écran annoncent correctement l'ouverture de la boîte de dialogue
- Le focus retourne à l'élément déclencheur lors de la fermeture
Personnaliser l'arrière plan avec ::backdrop
Le pseudo-élément CSS ::backdrop permet de personnaliser l'arrière-plan de la boîte de dialogue modale. Le style affecté à l'élement ::backdrop sera appliqué à tout ce qui est extérieur à la modale, un moyen idéal pour estomper le reste de la page.
Bonnes Pratiques
Pour une utilisation optimale de l'élément dialog :
- Styles : Utilisez
::backdroppour l'overlay et personnalisez l'apparence selon votre charte graphique. - Contenu : Structurez le contenu de manière sémantique avec des titres et sections appropriés.
- Message clair : Assurez-vous que le but de la boîte de dialogue est clair pour l'utilisateur.
Exemple d'une boîte de dialogue Modale
Étape 1 : Créer la structure HTML
<dialog id="myDialog">
<div class="dialog-content">
<h2>Boîte de dialogue modale</h2>
<p>Ceci est un exemple de boîte de dialogue modale utilisant l'élément dialog.</p>
<button class="close-button" onclick="closeModal()">Fermer</button>
</div>
</dialog>Étape 2 : Ajouter des styles CSS
/* Style pour le bouton */
.open-button {
padding: 12px 24px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 20px;
}
/* Style pour la boîte de dialogue */
dialog {
margin: auto;
padding: 20px;
border: none;
border-radius: 8px;
max-width: 400px;
}
/* Style pour le fond assombri */
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
}
/* Style pour le bouton de fermeture */
.close-button {
padding: 8px 16px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 15px;
}
.dialog-content {
text-align: center;
}Étape 3 : Ajouter le JavaScript
const dialog = document.getElementById('myDialog');
function openModal() {
dialog.showModal();
}
function closeModal() {
dialog.close();
}Essayez
Cliquez sur le bouton ci-dessous pour voir la bôite de dialogue s'afficher