Le problème
Un titre cliquable modifiant une classe CSS n’expose pas forcément commande et état. Un panneau seulement masqué visuellement peut laisser atteindre ses liens invisibles.
Exemple : mauvais et correct
Mauvais
<div class="question" onclick="this.nextElementSibling.hidden = false">
Que contient le rapport ?
</div>
<div hidden>Les écarts et les corrections proposées.</div>Correct
<details>
<summary>Que contient le rapport ?</summary>
<p>Les écarts constatés et les corrections proposées.</p>
</details>
<details>
<summary>Comment organiser les corrections ?</summary>
<p>Commencez par les blocages qui empêchent un parcours essentiel.</p>
</details>Le navigateur expose l’état ouvert ou fermé sans aria-expanded manuel. Plusieurs sections peuvent rester ouvertes.
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 — Exposer commande et état des accordéons scriptés.
- Critère 7.3 — Permettre l’activation clavier.
- Critère 10.8 — Ignorer les contenus repliés concernés.
- Critère 12.11 — Atteindre les contenus additionnels concernés.
Impact utilisateur
La personne doit pouvoir ouvrir les sections et atteindre leurs liens au clavier. Au lecteur d’écran, l’état permet de distinguer contenu disponible et panneau fermé.
Correction
- Pour une divulgation simple, utilisez summary comme premier enfant de details. Gardez un libellé compréhensible et un focus visible.
- Pour un accordéon personnalisé APG, placez button dans un titre adapté, reliez-le au panneau et synchronisez aria-expanded avec l’affichage.
- Retirez les panneaux fermés de la lecture et de la tabulation. Avant de masquer un descendant actif, prévoyez un retour logique, généralement vers sa commande.
Méthode de test
- Avec Tab puis Entrée et Espace, ouvrez et fermez chaque section : les liens ouverts doivent être accessibles.
- Au lecteur d’écran, vérifiez nom, état et accès au contenu révélé.
- Après fermeture, les commandes doivent rester disponibles et les contenus repliés ne plus être parcourus.
Points de vigilance
- Un changement CSS ne met pas automatiquement aria-expanded à jour.
- Multiplier les rôles region sur de petits panneaux encombre les repères de navigation.
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.