Dans cet article, nous nous adressons aux auditeurs en accessibilité pour aborder les modales, des éléments web omniprésents mais fréquemment sources de barrières d'accessibilité. Alors que les modales servent à diverses fonctions essentielles, de la présentation d'informations à la collecte de consentements, leur mauvaise implémentation peut entraver l'expérience utilisateur, en particulier pour ceux qui dépendent des technologies d'assistance.
À travers des scénarios fictifs illustrant des modales non conformes aux critères d'accessibilité, cet article vise à démontrer comment les auditer efficacement et les transformer en éléments pleinement accessibles. En suivant ces conseils, vous pourrez identifier les erreurs courantes et appliquer des solutions éprouvées pour améliorer l'accessibilité des modales et les rendre conformes aux WCAG et au RGAA.
1. Élément déclencheur
Les éléments déclencheurs des modales sont des points de contact importants sur un site. La facilité d'accès à ces éléments est primordiale pour garantir que tous les utilisateurs, qu'ils naviguent par souris, clavier, commande vocale ou autres technologies d'assistance, puissent les utiliser sans obstacle.
Problèmes fréquents
-
RGAA 7.1 - Majeur : présence d’un rôle inapproprié
Exemples non conformes :
<a href="#" onclick="openModal()">Ouvrir</a> <div onclick="openModal()">Ouvrir</div>Il est important pour un utilisateur de technologies d’assistance de connaître le rôle des éléments. C’est un rôle de bouton qui est attendu. Un lien rechargera la page par exemple.
-
RGAA 7.3 - Bloquant : ne fonctionne pas au clavier
Exemples non conformes :
<span onclick="openModal()">Ouvrir</span> <a onclick="openModal()">Ouvrir</a> -
Intitulé manquant ou non explicite
RGAA 7.1 - Bloquant : pas d'intitulé (vide ou image sans alt).
<div onclick="openModal()"></div> <div onclick="openModal()"><img src="img/picto.png" alt=""></div>RGAA 7.1 - Majeur : intitulé non explicite (ex: "+").
Solutions
-
Rôle et Clavier :
Soit remplacer le lien par un <button type="button">.
Soit attribuer role="button", tabindex="0" et gérer les touches Entrée/Espace en JS.
-
Intitulé pertinent :
Exemples conformes :
<button type="button" title="Fermer paramètres" onclick="closeModal()">Fermer</button> <button type="button" aria-label="Fermer paramètres" onclick="closeModal()">Fermer</button>
Checklist auditeur : Déclencheur
- Attribution de rôle : Est-il identifié comme un bouton ?
- Accessibilité au clavier : Est-il activable avec Entrée/Espace ?
- Intitulé : Est-il présent et explicite ?
2. Élément de fermeture
L'élément de fermeture, souvent marqué d'une icône "x", doit permettre de quitter la modale facilement. Une gestion inadéquate peut piéger les utilisateurs clavier (Keyboard Trap).
Problèmes fréquents
- RGAA 7.1 : Rôle inapproprié (lien vide ou span).
- RGAA 7.3 : Non fonctionnel au clavier.
- Intitulé : Bouton vide ou icône seule sans alternative textuelle.
Solutions
- Utiliser une balise <button> native.
- Ajouter un nom accessible via texte visible, `title`, `aria-label` ou `alt` sur l'image.
<button type="button" aria-label="Fermer la fenêtre" onclick="close()">X</button>3. Comportement (Focus Management)
La gestion du focus est critique. Lorsqu'une modale s'ouvre, le focus doit y entrer. Lorsqu'elle est ouverte, il ne doit pas en sortir. À la fermeture, il doit revenir au point de départ.
Erreurs RGAA 12.8 (Majeur)
- Le focus reste sur le bouton déclencheur (arrière-plan) à l'ouverture.
- Le focus peut sortir de la modale en tabulant (pas de "Focus Trap").
- À la fermeture, le focus est perdu (repart au début de page `body`).
Comportement attendu
- Ouverture : Déplacer le focus JS sur la modale ou son premier élément interactif.
- Navigation : Boucler le focus à l'intérieur (Trap).
- Fermeture : `element.focus()` sur le bouton déclencheur.
4. Structure Sémantique
La structure communique aux lecteurs d'écran qu'il s'agit d'une boîte de dialogue et non d'un simple contenu inséré dans la page.
Manquements RGAA 7.1
- Absence de rôle sémantique.
- Absence de nom (Titre de la modale non relié).
- Arrière-plan non masqué pour les technologies d'assistance (`aria-hidden` manquant sur le reste).
Code Type Conforme
<div role="dialog" aria-modal="true" aria-labelledby="modalTitle">
<div role="document">
<h1 id="modalTitle">Titre de la modale</h1>
<!-- contenu -->
<button>Fermer</button>
</div>
</div>Note : L'attribut aria-modal="true" indique aux lecteurs d'écran que le contenu derrière est inerte.
Conclusion
Cet article sert de ressource pour les auditeurs et les développeurs. En détaillant les erreurs courantes, nous espérons faciliter la prise en compte de ces critères dès la conception.
Pour les auditeurs professionnels cherchant à améliorer la qualité de leurs audits, nous proposons un service de relecture d'audits accessibilité.