SPA (React, Vue) et Accessibilité : Le piège de la gestion du focus

Les Single Page Applications (SPA) ont révolutionné le web. Mais elles ont cassé un mécanisme fondamental du navigateur : le rechargement de page. Pour un aveugle utilisant un lecteur d'écran, quand une page se recharge, le logiciel annonce le nouveau titre. Sur une SPA, rien ne se passe. L'utilisateur clique sur un lien, le contenu change visuellement, mais le focus reste sur le lien cliqué (ou pire, est perdu dans le vide).

Le problème du "Silence Radio"

Imaginez : vous cliquez sur "Page suivante". Visuellement, la page change. Mais votre lecteur d'écran reste muet. Vous ne savez pas si l'action a fonctionné. C'est l'expérience par défaut sur React Router ou Vue Router si vous ne faites rien.

La solution : Gérer le focus manuellement

À chaque changement de route (changement d'URL), vous devez forcer le navigateur à annoncer le changement.

La méthode recommandée :

1. Changer le <title> : C'est la première chose à faire. Utilisez document.title = "Nouvelle Page - Mon App".
2. Déplacer le focus : Envoyez le focus sur le titre principal <h1> de la nouvelle page (ou sur un conteneur principal).
   • Astuce : Ajoutez tabindex="-1" au <h1> pour pouvoir lui donner le focus programmatiquement sans qu'il soit tabulable au clavier.

Exemple en React (Hook)

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export const usePageTracking = () => {
  const location = useLocation();

  useEffect(() => {
    // 1. Mettre à jour le titre
    document.title = getTitleFromRoute(location.pathname);

    // 2. Déplacer le focus vers le H1 ou le Main
    const mainHeader = document.querySelector('h1');
    if (mainHeader) {
      mainHeader.setAttribute('tabindex', '-1');
      mainHeader.focus();
    }
  }, [location]);
};

Les Live Regions (aria-live)

Pour des changements plus subtils (ex: filtrer une liste sans changer d'URL), utilisez une région aria-live="polite".

<div aria-live="polite">
  3 résultats trouvés.
</div>

Le lecteur d'écran lira ce texte dès qu'il changera, sans interrompre l'utilisateur.

Conclusion

L'accessibilité des SPA ne "vient pas toute seule". C'est une responsabilité technique. Si vous utilisez un framework JS moderne, la gestion du focus doit être dans votre checklist de définition de fini (DoD).