Achten Sie darauf, dass der Fokus der Nutzer auf neue Inhalte gelenkt wird, damit sie entsprechende Aktionen ausführen können.
Manuelle Tests
Single-Page-Apps sollten unbedingt getestet werden, insbesondere wenn es darum geht, die Aufmerksamkeit der Nutzer auf neue Inhalte zu lenken.
In einer Single-Page-App führt das Klicken auf einen Link in der Regel nicht zu einer vollständigen Aktualisierung.
Stattdessen werden bei einer Routenänderung neue Daten für den Inhaltsbereich <main> abgerufen.
Nutzer, die einen Screenreader oder andere Hilfstechnologien verwenden, wissen möglicherweise nicht, dass der Seite neue Inhalte hinzugefügt wurden.
Es gibt keine Hinweise darauf, dass er zum Bereich <main> zurückkehren sollte.
In diesem Fall sollten Sie den Fokus des Nutzers steuern, damit der wahrgenommene Kontext des Nutzers mit den visuellen Inhalten der Website übereinstimmt.
Lösung
Wenn Sie den Fokus eines Nutzers auf neue Inhalte auf einer Seite lenken möchten, suchen Sie in den neu geladenen Inhalten nach einer guten Überschrift und lenken Sie den Fokus darauf.
Am einfachsten geht das, indem Sie der Überschrift eine tabindex von -1 zuweisen und die focus()-Methode aufrufen:
<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>
Hilfstechnologien geben die neue Überschrift und den Hauptmarkierungsbereich an, in dem sie enthalten ist.