Sur un site classique, changer de page recharge intégralement le document : le navigateur annonce automatiquement le nouveau titre à la technologie d’assistance, et le focus revient logiquement en haut du document. Un site construit en navigation instantanée — souvent appelée PJAX ou navigation par récupération de fragments, une technique que certains thèmes WordPress orientés performance utilisent pour éviter un rechargement complet — casse ce comportement par défaut : le contenu change dans le DOM, l’URL se met à jour, mais le navigateur ne recharge jamais réellement la page, donc rien n’est annoncé automatiquement.
Pour un utilisateur voyant, le changement se voit immédiatement à l’écran. Pour un utilisateur de lecteur d’écran, sans intervention supplémentaire, rien ne signale que le contenu de la page a changé : il continue de naviguer dans l’ancien contenu, ou reste bloqué sur l’élément qu’il vient de cliquer, sans savoir qu’une nouvelle page vient réellement de se charger.
Les deux actions indispensables à chaque changement de vue
La correction tient en deux gestes systématiques, à effectuer à chaque navigation interne réussie :
- Mettre à jour
document.titleavec le titre réel de la nouvelle page — un détail parfois oublié en navigation par fragments, alors que ce titre reste la première chose qu’un lecteur d’écran annonce lors d’un changement de contexte. - Déplacer explicitement le focus clavier vers le titre principal de la nouvelle page, pour que la navigation au clavier reprenne à un endroit logique plutôt que de rester bloquée sur le lien qui vient d’être cliqué.
Le code : après chaque navigation réussie
async function chargerPage(url) {
const reponse = await fetch(url);
const html = await reponse.text();
const document_temp = new DOMParser().parseFromString(html, 'text/html');
document.title = document_temp.title;
document.getElementById('contenu-principal').innerHTML =
document_temp.getElementById('contenu-principal').innerHTML;
const titre = document.querySelector('#contenu-principal h1');
if (titre) {
titre.setAttribute('tabindex', '-1');
titre.focus();
}
annoncerChangementDePage(document_temp.title);
history.pushState(null, '', url);
}Une annonce explicite en complément, pour les cas ambigus
Déplacer le focus vers le <h1> suffit dans la plupart des cas, puisque les lecteurs d’écran annoncent automatiquement le texte de l’élément qui reçoit le focus. Certaines équipes ajoutent en complément une région aria-live="polite", mise à jour avec un message explicite (« Page chargée : Nos réalisations »), en particulier quand le contenu de la page ne commence pas immédiatement par un titre clair :
function annoncerChangementDePage(titre) {
const region = document.getElementById('annonce-navigation');
region.textContent = 'Page chargée : ' + titre;
}Le piège du scroll oublié
Un changement de vue en navigation instantanée doit aussi remettre le défilement en haut de la page, pas seulement déplacer le focus. Sans cela, un utilisateur voyant qui n’utilise pas de lecteur d’écran mais qui navigue au clavier pourrait se retrouver avec un focus visuel situé hors de la zone visible à l’écran, ce qui reste déroutant même sans technologie d’assistance.
window.scrollTo(0, 0);Vérifier avec un vrai test
Le test de validation consiste à naviguer entièrement au clavier avec NVDA actif : cliquer sur un lien interne, vérifier que le titre du document annoncé par le lecteur d’écran correspond bien à la nouvelle page, puis appuyer sur Tab et confirmer que la navigation reprend depuis le début du contenu principal, pas depuis un endroit resté figé dans l’ancienne page.
En résumé
La navigation instantanée améliore la performance perçue, mais supprime gratuitement deux comportements que le navigateur offrait sans effort lors d’un rechargement classique : l’annonce du titre et le repositionnement du focus. Les reproduire demande une dizaine de lignes de JavaScript à chaque changement de vue, un coût minime au regard du confort qu’elles restaurent.
