Le problème
Superposer une div ne crée pas une modale : le clavier peut rester derrière et le lecteur d’écran ignorer son titre. Un rôle seul ne règle pas ces comportements.
Exemple : mauvais et correct
Mauvais
<div class="modale">
<h2>Confirmer votre choix</h2>
<span onclick="this.parentElement.remove()">Fermer</span>
</div>Correct
<button id="ouvrir" type="button">Vérifier mon choix</button>
<dialog id="confirmation" aria-labelledby="titre-modale">
<h2 id="titre-modale">Confirmer votre choix</h2>
<p>Vous pouvez encore modifier votre demande.</p>
<button id="fermer" type="button" autofocus>Revenir à la demande</button>
</dialog>
<script>
const ouvrir = document.querySelector("#ouvrir");
const modale = document.querySelector("#confirmation");
ouvrir.addEventListener("click", () => modale.showModal());
document.querySelector("#fermer").addEventListener("click", () => {
modale.close();
});
modale.addEventListener("close", () => ouvrir.focus());
</script>Cette fenêtre courte est réversible. showModal() fournit le comportement modal ; close et l’événement de fermeture restaurent ici le focus sur le déclencheur.
RGAA concerné
Les critères dépendent de l’élément, de son usage et des cas particuliers applicables. Voici les contrôles à examiner pour ce sujet.
- Critère 7.1 — Restituer nom, composant et état.
- Critère 7.3 — Permettre l’utilisation clavier.
- Critère 12.8 — Maintenir une tabulation cohérente.
- Critère 12.9 — Permettre fermeture et reprise du parcours.
- Critère 10.7 — Garder le focus visible.
Impact utilisateur
La personne doit lire et fermer la fenêtre au clavier sans atteindre l’arrière-plan. Son nom et le focus initial donnent un contexte compréhensible au lecteur d’écran.
Correction
- Utilisez dialog et showModal() si votre environnement les prend en charge. Nommez la fenêtre par son titre visible avec aria-labelledby ; fournissez une fermeture.
- Adaptez le focus initial : titre avec tabindex="-1" pour un contenu long ou structuré, action prudente pour une confirmation sensible.
- Revenez généralement au déclencheur après fermeture. Pour une modale personnalisée, implémentez confinement du focus et arrière-plan inactif avant d’annoncer aria-modal="true".
Méthode de test
- Ouvrez au clavier : le nom doit être annoncé et le focus placé dans la fenêtre.
- Avec Tab et Maj+Tab, le focus doit rester dans la modale. L’arrière-plan doit être inactif.
- Fermez avec le bouton puis Échap : le focus doit revenir au déclencheur et la navigation continuer.
Points de vigilance
- open seul ne fournit pas le comportement modal de showModal().
- Ne reliez pas par défaut un long contenu structuré à aria-describedby : l’annonce condensée peut perdre ses relations.
Sources officielles
Le RGAA fournit les critères de contrôle. Les ressources du W3C et du WHATWG complètent les méthodes de mise en œuvre ; elles ne remplacent pas les tests RGAA.