Wenn neue Inhalte zu einer Seite hinzugefügt werden, ist es wichtig, dass der Fokus des Nutzers auf diese Inhalte gelenkt wird, damit er entsprechende Maßnahmen ergreifen kann.
Manuelles Testen
Einseitige Apps sind wichtig zu testen, insbesondere wenn es darum geht, den Fokus eines Nutzers auf neue Inhalte zu verwalten.
In der Regel führt das Klicken auf einen Link
in einer Single-Page-App nicht zu einer vollständigen Aktualisierung.
Stattdessen werden durch eine Routenänderung neue Daten für den Inhaltsbereich <main> abgerufen.
Für sehende Nutzende
funktioniert das problemlos.
Nutzer, die mit einem Screenreader oder einer anderen assistiven Technologie navigieren, wissen jedoch möglicherweise nicht, dass der Seite neue Inhalte hinzugefügt wurden.
Es gibt keinen Hinweis darauf, dass sie zum Bereich <main> zurückkehren sollte.
In diesem Fall sollten Sie den Fokus des Nutzers verwalten, um den wahrgenommenen Kontext des Nutzers mit den visuellen Inhalten der Website synchron zu halten.
Lösung
Um den Fokus eines Nutzers auf aktuelle Inhalte auf einer Seite zu steuern, solltest du im neu geladenen Inhalt eine passende Überschrift suchen und den Fokus darauf richten.
Am einfachsten erstellen Sie dies, indem Sie der Überschrift den Wert tabindex -1
geben und die Methode focus() 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>
Assistive Technologien geben die neue Überschrift und den wichtigsten Orientierungsbereich, in dem sie sich befindet, an.
Weitere Informationen finden Sie unter Fokus für Barrierefreiheit verwalten.