alertdialog

Quand l’utiliser

Uniquement pour les interruptions : une erreur qui empêche l’utilisateur de continuer, une confirmation « Êtes-vous sûr de vouloir supprimer ? », un avertissement de modifications non enregistrées lors d’une navigation. Utiliser alertdialog pour des modales de routine est excessif — utilisez le simple role="dialog" dans ce cas.

La différence avec role="dialog" est qu’un alertdialog est annoncé comme un role="alert" — assertif, immédiat — lors de son apparition. Cela est approprié pour de vraies interruptions ; l’abus entraîne une fatigue des lecteurs d’écran.

aria-labelledby (pointant vers le titre) et aria-describedby (pointant vers le texte principal) sont tous deux requis. L’alertdialog doit contenir au moins un bouton activable pour permettre à l’utilisateur de le fermer.

Contrat clavier + focus

Selon le pattern APG alertdialog :

• Le focus se déplace vers l’alertdialog à l’ouverture — généralement vers le bouton le plus sûr (Annuler) afin qu’une pression accidentelle sur Entrée ne confirme pas une action destructive.
• Tab / Shift+Tab font circuler le focus à l’intérieur de la boîte de dialogue.
• Échap ferme l’alertdialog et retourne le focus vers l’élément déclencheur.
• Le reste de la page est inactif tant que l’alertdialog est ouvert.

Choisissez soigneusement le focus initial : pour les demandes de confirmation « Supprimer ? », mettez le focus sur Annuler par défaut — jamais sur le bouton destructif.

Erreurs courantes

• Utiliser role="alertdialog" pour chaque modale. Les lecteurs d’écran bombardent l’utilisateur d’une annonce assertive à chaque ouverture de modale.
• Focus initial sur le bouton destructif (Supprimer, Ignorer) — une pression involontaire sur Entrée efface le travail de l’utilisateur.
• aria-describedby manquant sur le texte principal. L’utilisateur entend le titre et les boutons mais pas l’avertissement.
• Alertdialog sans boutons — il n’y a aucun moyen de le fermer, et le rôle impose une réponse actionnelle.
• Alertdialogs qui se ferment automatiquement après un délai. Contredit la sémantique « exige une réponse ».

Exemple

<div
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="confTitle"
  aria-describedby="confDesc"
>
  <h2 id="confTitle">Delete draft?</h2>
  <p id="confDesc">"Untitled draft (March 12)" will be permanently deleted. This action cannot be undone.</p>
  <button type="button" autofocus>Cancel</button>
  <button type="button">Delete draft</button>
</div>