Gérer le focus dans une Single Page Application (SPA)
L’architecture SPA repose sur un principe simple : le navigateur ne recharge jamais la page. Tout le contenu est mis à jour dynamiquement.
Pour l’accessibilité, il faut donc simuler un changement de page pour que le focus remonte bien tout en haut du contenu et que le titre de la page soit restitué au lecteur d’écran.
Pour cela, il faut :
- Mettre à jour le
<title>de la page à chaque changement de vue. - Ajouter une balise d’ancrage tout en haut de chaque page (premier élément du
<body>) :<p tabindex="-1" class="visually-hidden">Titre de la page</p>
Cette balise masquée doit :- Avoir la même valeur que le
<title>de la page. - Posséder un attribut
tabindex="-1"pour permettre le déplacement de focus en JavaScript. - Être masquée visuellement tout en restant disponible pour le lecteur d’écran (via la classe
.visually-hiddenpar exemple).
- Avoir la même valeur que le
- Déplacer dynamiquement le focus sur cette balise lors du changement de page (avec la méthode
.focus()en JavaScript).
Remarque
Si la classe .visually-hidden n’existe pas dans le projet, une classe peut être créée pour masquer visuellement un élément tout en restant disponible pour le lecteur d’écran :
.hors-ecran {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}