Za każdym razem, gdy na stronie dodasz nowe treści, postaraj się, aby użytkownik zwrócił na nie uwagę i mógł podjąć odpowiednie działania.
Jak przeprowadzić test ręczny
Aplikacje jednostronicowe należy przetestować, zwłaszcza jeśli chodzi o skupienie uwagi użytkownika na nowych treściach.
W aplikacji jednostronicowej kliknięcie linku zwykle nie powoduje pełnego odświeżenia.
W ramach zmiany trasy są pobierane nowe dane dotyczące obszaru treści <main>.
Użytkownicy korzystający z czytnika ekranu lub innej technologii wspomagającej mogą nie wiedzieć, że na stronie zostały dodane nowe treści.
Nie ma informacji, że użytkownicy powinni wrócić do obszaru <main>.
W takich przypadkach musisz zarządzać punktem skupienia użytkownika, aby zachować spójność między postrzeganym przez niego kontekstem a wizualnymi elementami witryny.
Rozwiązanie
Aby użytkownik mógł skupić się na nowych treściach na stronie, znajdź odpowiedni nagłówek w nowo wczytywanych treściach i skieruj na nie widok.
Najprostszym sposobem jest nadanie nagłówkowi tabindex wartości -1 i wywołanie metody 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>
Technologie wspomagające informują o nowym nagłówku i głównym obszarze punktu orientacyjnego, w którym się znajduje.
Zasoby
Kod źródłowy dotyczący ustawienia uwagi użytkownika na nowych treściach dodanych do strony