Telkens wanneer er nieuwe inhoud aan een pagina wordt toegevoegd, moet u ervoor zorgen dat de aandacht van de gebruiker op die inhoud wordt gericht, zodat hij of zij daar actie op kan ondernemen.
Handmatig testen
Apps met één pagina zijn belangrijk om te testen, vooral als het gaat om het beheren van de focus van een gebruiker op nieuwe inhoud.
Normaal gesproken zal het klikken op een link in een app met één pagina geen harde vernieuwing veroorzaken. In plaats daarvan haalt een routewijziging nieuwe gegevens op voor het <main> inhoudsgebied.
Gebruikers die navigeren met een schermlezer of andere ondersteunende technologie weten mogelijk niet dat de nieuwe inhoud aan de pagina is toegevoegd. Er zijn geen aanwijzingen dat ze terug moeten navigeren naar het <main> -gebied.
Wanneer dit gebeurt, wilt u de focus van de gebruiker beheren om de waargenomen context van de gebruiker synchroon te houden met de visuele inhoud van de site.
Hoe te repareren
Als u de focus van een gebruiker op nieuwe inhoud op een pagina wilt beheren, zoekt u een goede kop in de nieuw geladen inhoud en richt u de focus daarop. De eenvoudigste manier om dit voor elkaar te krijgen is door de kop een tabindex van -1 te geven en de focus() -methode aan te roepen:
<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>
Hulptechnologieën kondigen de nieuwe koers aan en het belangrijkste herkenningsgebied waarin deze zich bevindt.