Nawigacja klawiaturą i zarządzanie fokusem
Proszę zapewnić możliwość dotarcia klawiszem Tab do wszystkich elementów interaktywnych, programowo zarządzać fokusem w oknach dialogowych i routingu oraz tworzyć widoczne wskaźniki fokusu.
Nawigacja klawiaturą i zarządzanie fokusem to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Dlaczego nawigacja klawiaturą ma znaczenie
Wielu użytkowników nie może korzystać z myszy: osoby z niepełnosprawnościami ruchowymi, użytkownicy czytników ekranu oraz zaawansowani użytkownicy, którzy preferują klawiaturę. Jeśli po aplikacji nie można nawigować za pomocą klawiatury, dla tych osób jest ona niedostępna.
Tab i Shift+Tab
Tab przenosi fokus do następnego interaktywnego elementu. Shift+Tab przenosi go do poprzedniego. Kolejność domyślnie wynika z kolejności w DOM — nie należy z nią walczyć; kolejność elementów w DOM powinna wyznaczać kolejność przechodzenia za pomocą klawisza Tab.
Co domyślnie może otrzymać fokus
Natywne elementy interaktywne mogą otrzymać fokus: a[href], button, input, select, textarea, summary. Niestandardowe elementy wymagają tabindex.
Wartości tabindex
tabindex="0": element jest uwzględniany w kolejności przechodzenia klawiszem Tab, w pozycji wynikającej z DOM. tabindex="-1": element można fokusować wyłącznie za pomocą JS (fokus skryptem, nie klawiszem Tab). tabindex=">0": antywzorzec — tworzy mylącą kolejność fokusu, dlatego nigdy nie należy go używać.
<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>
<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>Widoczny wskaźnik fokusu
Nigdy nie należy usuwać obramowania fokusu bez zapewnienia zamiennika. WCAG wymaga widocznego wskaźnika dla każdego elementu, który może otrzymać fokus.
/* BAD: hides focus for everyone */
*:focus { outline: none; }
/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}:focus-visible
Pseudoklasa :focus-visible jest aktywowana tylko wtedy, gdy fokus pochodzi z klawiatury, a nie z kliknięcia myszy. Pozwala zachować czysty wygląd po kliknięciu myszą, a jednocześnie wyświetlać fokus klawiatury.
Link „Przejdź do treści”
Pierwszym elementem, który może otrzymać fokus, powinien być link umożliwiający pominięcie treści, aby użytkownicy klawiatury mogli przejść bezpośrednio do głównej treści, omijając nawigację w nagłówku.
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>
/* CSS */
.skip-link {
position: absolute; left: -10000px;
}
.skip-link:focus {
left: 1rem; top: 1rem;
background: white; padding: 0.5rem 1rem;
}Pułapka fokusu w modalach
Po otwarciu modalu fokus powinien pozostać w jego obrębie — przejście klawiszem Tab z ostatniego elementu przenosi na pierwszy, a Shift+Tab z pierwszego przenosi na ostatni. Naciśnięcie klawisza Escape zamyka modal.
// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;
// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();Używaj elementu dialog
Natywny element <dialog> w HTML automatycznie obsługuje pułapkę fokusu, zamykanie klawiszem Escape i przyciemnienie tła modalu.
<dialog id="signup">
<h2>Sign up</h2>
<form method="dialog">
<input name="email" required>
<button>Submit</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
document.getElementById('signup').showModal(); // opens with focus trap
</script>Zarządzanie fokusem po zmianie trasy
Aplikacje SPA nie przeładowują strony, więc użytkownicy czytników ekranu nie otrzymują sygnału, że nastąpiła nawigacja. Po zmianie trasy należy przenieść fokus na h1 lub main nowej strony.
// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();Kolejność fokusu powinna odpowiadać kolejności wizualnej
Należy upewnić się, że kolejność w DOM odpowiada wizualnemu przepływowi elementów. Jeśli CSS zmienia kolejność elementów (flex order, rozmieszczenie w gridzie, position absolute), kolejność przechodzenia klawiszem Tab nie będzie się zgadzać — będzie to mylące dla wszystkich.
Odłóż mysz i przeprowadź test
Najbardziej użyteczny test dostępności polega na odłączeniu myszy i próbie korzystania z całej aplikacji za pomocą klawiszy Tab, Shift+Tab, Enter, spacji oraz klawiszy strzałek. Jeśli utkniesz, Twoi użytkownicy również utkną.
Szybkie sprawdzenie
Jaka pseudoklasa CSS pozwala stylizować obramowanie fokusu tylko wtedy, gdy fokus pochodzi z klawiatury, a nie z kliknięcia myszy?
Podsumowanie: nawigacja klawiaturą
Natywne elementy interaktywne domyślnie mogą otrzymać fokus. Wartości tabindex=0 należy stosować tylko w niestandardowych komponentach; nigdy nie należy używać tabindex>0. Zawsze należy wyświetlać fokus — używaj :focus-visible. Dodaj link umożliwiający przejście do treści. W modalach ogranicz fokus do ich wnętrza i przywróć go po zamknięciu. W miarę możliwości używaj natywnego <dialog>. Po zmianie trasy przenieś fokus na h1/main. Przeprowadź test po odłożeniu myszy.
Często zadawane pytania
Czy lekcja „Nawigacja klawiaturą i zarządzanie fokusem” jest bezpłatna?
Tak — pełny tekst „Nawigacja klawiaturą i zarządzanie fokusem” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Nawigacja klawiaturą i zarządzanie fokusem”?
Proszę zapewnić możliwość dotarcia klawiszem Tab do wszystkich elementów interaktywnych, programowo zarządzać fokusem w oknach dialogowych i routingu oraz tworzyć widoczne wskaźniki fokusu. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Nawigacja klawiaturą i zarządzanie fokusem”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Poziomy WCAG: A, AA, AAA
- Semantyczny HTML jako fundament
- Role i atrybuty ARIA
- Nawigacja klawiaturą i zarządzanie fokusem