Chaque fois qu'un 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 prendre des mesures.
Effectuer un test manuel
Il est important de tester les applications monopages, en particulier pour gérer l'attention de l'utilisateur sur de nouveaux contenus.
En règle générale, dans une application à page unique, cliquer sur un lien n'entraîne pas d'actualisation forcée.
Au lieu de cela, un changement d'itinéraire extrait de nouvelles données pour la zone de contenu <main>.
Les utilisateurs qui naviguent avec un lecteur d'écran ou une autre technologie d'assistance peuvent ne pas savoir que le nouveau contenu a été ajouté à la page.
Rien ne lui indique de revenir à la zone <main>.
Dans ce cas, vous devez gérer l'attention de l'utilisateur pour que le contexte perçu de l'utilisateur soit synchronisé avec le contenu visuel du site.
Solution
Pour gérer l'attention d'un utilisateur sur du contenu récent sur une page, trouvez un bon titre dans le contenu nouvellement chargé et orientez-y son attention.
Le moyen le plus simple d'y parvenir consiste à attribuer à l'en-tête un tabindex de -1 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 de repère principale dans laquelle il se trouve.