Le problème
Une diapositive changeante peut faire disparaître le texte ou le lien visé. À l’inverse, des diapositives masquées encore accessibles font atteindre des contenus invisibles.
Exemple : mauvais et correct
Mauvais
<div id="diaporama">
<p>Audit de votre site</p>
<p hidden>Formation de votre équipe</p>
</div>
<script>
const diapositives = [...document.querySelectorAll("#diaporama p")];
let index = 0;
setInterval(() => {
diapositives[index].hidden = true;
index = (index + 1) % diapositives.length;
diapositives[index].hidden = false;
}, 3000);
</script>Correct
<section aria-labelledby="titre-carrousel">
<h2 id="titre-carrousel">Nos accompagnements</h2>
<button id="precedent" type="button">Précédent</button>
<button id="suivant" type="button">Suivant</button>
<p id="position" role="status">1 sur 2</p>
<div id="diaporama">
<p>Audit de votre site</p>
<p hidden>Formation de votre équipe</p>
</div>
</section>
<script>
const diapositives = [...document.querySelectorAll("#diaporama p")];
let index = 0;
function afficher(nouvelIndex) {
diapositives[index].hidden = true;
index = (nouvelIndex + diapositives.length) % diapositives.length;
diapositives[index].hidden = false;
document.querySelector("#position").textContent = `${index + 1} sur 2`;
}
document.querySelector("#precedent").addEventListener("click", () => afficher(index - 1));
document.querySelector("#suivant").addEventListener("click", () => afficher(index + 1));
</script>Aucun contenu ne disparaît sans action. hidden masque les diapositives inactives ; la position est annoncée sans déplacer le focus.
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 commandes et états.
- Critère 7.3 — Permettre leur activation clavier.
- Critère 10.8 — Ignorer les contenus masqués concernés.
- Critère 13.8 — Contrôler les contenus en mouvement concernés.
- Critère 7.5 — Restituer la position lorsqu’elle constitue un statut.
Impact utilisateur
Une personne qui lit lentement doit terminer sa lecture. Un lien disparaissant pendant la tabulation casse la tâche ; des contenus invisibles actifs créent des repères contradictoires.
Correction
- Préférez la rotation manuelle lorsque possible. Nommez les commandes précédente et suivante ; gardez le focus sur la commande activée pour permettre des actions successives.
- Si la rotation est automatique, fournissez un arrêt. L’APG recommande aussi l’arrêt au survol et à l’entrée du focus ; après cette entrée, la reprise demande une action volontaire.
- Synchronisez affichage et exposition des diapositives. Annoncez sobrement les changements utiles après action, sans lecture répétée du contenu automatique.
Méthode de test
- Au clavier, changez de diapositive : le focus doit rester prévisible.
- Au lecteur d’écran, vérifiez la position annoncée et l’absence des contenus inactifs.
- Pour une rotation automatique, testez arrêt, survol, entrée du focus et reprise volontaire : le temps de lecture doit rester contrôlable.
Points de vigilance
- aria-hidden seul ne retire pas les descendants interactifs de Tab.
- Une pause ne corrige ni commandes inaccessibles ni diapositives mal masquées.
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.