Za każdym razem, gdy na stronie pojawi się nowa treść, postaraj się upewnić, że użytkownik jest na niej skierowany, aby mógł podjąć odpowiednie działania.
Testowanie ręczne
Aplikacje jednostronicowe należy testować, zwłaszcza jeśli chodzi o kontrolowanie przez użytkownika nowych treści.
W aplikacji składającej się z jednej strony kliknięcie linku
nie powoduje zwykle twardego odświeżenia.
Zamiast tego zmiana trasy pobiera nowe dane z obszaru treści <main>.
Ta opcja sprawdza się
w przypadku osób widzących.
Jednak użytkownicy korzystający z czytnika ekranu lub innej technologii wspomagającej osoby z niepełnosprawnością mogą nie wiedzieć, że na stronie pojawiły się nowe treści.
Nie sugerujemy, by użytkownik powinien wrócić do obszaru <main>.
W takim przypadku warto odpowiednio kontrolować obraz użytkownika w taki sposób, aby jego postrzegany kontekst był zsynchronizowany z treściami wizualnymi w witrynie.
Rozwiązanie
Aby pomóc użytkownikowi skupić się na nowych treściach na stronie, znajdź odpowiedni nagłówek w nowo wczytywanych treściach i skoncentruj się na nim.
Najprostszym sposobem na to jest nadanie nagłówka wartości tabindex o wartości -1 i wywołanie jego 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 osoby z niepełnosprawnością informują o nowym nagłówku i głównym obszarze orientacyjnym, w którym się znajduje.
Zobacz też Zarządzanie ułatwieniami dostępu.
Zasoby
Kod źródłowy kontroli użytkownik może skupić się na nowych treściach dodanych do strony