Chaque fois que du nouveau contenu est ajouté à une page, essayez de vous assurer que l'attention de l'utilisateur est dirigée vers ce contenu, afin qu'il puisse agir dessus.
Tester manuellement
Il est important de tester les applications monopages, en particulier pour gérer l'attention de l'utilisateur sur le nouveau contenu.
En règle générale, dans une application monopage, cliquer sur un lien n'entraîne pas d'actualisation forcée.
À la place, une modification d'itinéraire extrait de nouvelles données pour la zone de contenu <main>.
Pour les utilisateurs voyants,
cela fonctionne très bien.
Toutefois, les utilisateurs qui utilisent un lecteur d'écran ou une autre technologie d'assistance ne savent peut-être pas que le nouveau contenu a été ajouté à la page.
Rien n'indique qu'ils doivent revenir à la zone <main>.
Dans ce cas, vous pouvez gérer l'attention de l'utilisateur pour synchroniser son contexte perçu avec le contenu visuel du site.
Solutions
Pour gérer l'attention de l'utilisateur vers le contenu récent d'une page, recherchez un bon titre dans le contenu nouvellement chargé et dirigez-le vers celui-ci.
Le moyen le plus simple de procéder consiste à attribuer l'tabindex de -1 à l'en-tête et à appeler sa méthode focus():
<main>
<h2 tabindex="-1">Welcome to your shopping cart</h2>
</main>
<script>
// Assuming this gets called every time new content loads...
function onNewPage() {
var heading = document.querySelector('h2');
heading.focus();
// You can also update the page title :)
document.title = heading.textContent;
}
</script>
Les technologies d'assistance annoncent le nouveau titre et la zone du point de repère principal dans lequel il se trouve.
Consultez également Gérer le ciblage pour l'accessibilité.