HTML Academy · Lekcja

Nawigacja klawiaturą i kolejność fokusu

Zapewnianie dostępu do wszystkich funkcji za pomocą klawiatury w logicznej kolejności

Lekcja 4 z 413 kroki

Nawigacja klawiaturą i kolejność fokusu to bezpłatna lekcja HTML 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 HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Kto potrzebuje nawigacji za pomocą klawiatury?

Wielu użytkowników korzysta z nawigacji za pomocą klawiatury:

Osoby z niepełnosprawnościami motorycznymi — nie mogą używać myszy
Zaawansowani użytkownicy — preferują skróty klawiaturowe
Użytkownicy czytników ekranu — poruszają się wyłącznie za pomocą klawiatury
Użytkownicy urządzeń przełącznikowych — używają przycisków symulujących naciśnięcia klawiszy

Elementy naturalnie dostępne za pomocą fokusu

Te elementy HTML są domyślnie dostępne za pomocą fokusu klawiatury:

<a href> — klawisz Tab przenosi na element, a Enter go aktywuje
<button> — klawisz Tab przenosi na element, a Enter lub spacja go aktywuje
<input>, <textarea>, <select> — klawisz Tab przenosi na te elementy
<details> / <summary> — Tab + Enter

Kolejność tabulacji

Przeglądarka określa kolejność tabulacji na podstawie:

Domyślnej kolejności DOM — elementy są odwiedzane klawiszem Tab w kolejności, w której występują w kodzie HTML
Dodatnich wartości tabindex — fokus przechodzi najpierw na te elementy, w kolejności rosnącej ich wartości
tabindex="0" — element jest dodawany do naturalnej kolejności tabulacji w miejscu wynikającym z jego pozycji w DOM
tabindex="-1" — element nie występuje w kolejności tabulacji; można ustawić na nim fokus tylko za pomocą skryptu

Naturalna kolejność tabulacji = kolejność DOM

Kolejność odczytywania kodu HTML powinna odpowiadać układowi wizualnemu:

<!-- GOOD: DOM order matches visual left-to-right, top-to-bottom: -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

<!-- BAD: visually reordered with CSS, DOM order broken:
     CSS flexbox order: doesn't affect tab order!
     Screen readers and keyboard users follow DOM order, not CSS order -->

Widoczny wskaźnik fokusu

WCAG 2.4.7 (poziom AA): fokus klawiatury musi być widoczny:

/* NEVER do this: */
* { outline: none; }           /* removes all focus outlines */

/* GOOD: styled focus indicator: */
:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
  border-radius: 4px;
}

/* :focus-visible shows outline for keyboard only
   mouse clicks don't trigger :focus-visible -->
/* But outline: none with :focus (not :focus-visible) hides for both */

Niestandardowe style fokusu

Style fokusu w systemie projektowym:

/* Replace outline with box-shadow for rounded elements: */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.4);
}

/* Always ensure 3:1 contrast ratio between
   focus indicator and background (WCAG 2.4.11 Level AA) */

Logiczna kolejność fokusu

Kolejność fokusu powinna być logiczna i przewidywalna — WCAG 2.4.3 (poziom A):

<!-- BAD: focus order jumps around the page -->
<!-- First: footer link (tabindex=5) -->
<!-- Then: sidebar (tabindex=3) -->
<!-- Then: header nav (tabindex=1) -->

<!-- GOOD: natural DOM order matches reading flow: -->
<!-- Header → Nav → Main Content → Sidebar → Footer -->

Linki pomijania

Linki pomijania pozwalają użytkownikom klawiatury ominąć powtarzalną nawigację:

<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Visually hidden until focused: -->
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #0070f3;
  color: white;
  padding: 0.75rem;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;  /* visible when focused -->
}

Pułapka fokusu w oknie modalnym

Otwarte okna modalne muszą zatrzymywać fokus:

<!-- When modal opens:
1. Move focus to modal container or first interactive element
2. Tab stays within modal
3. When modal closes, return focus to the trigger button
-->

const modal = document.getElementById('modal');
const trigger = document.getElementById('open-modal');

function openModal() {
  modal.removeAttribute('hidden');
  modal.querySelector('button, [tabindex="0"]').focus();
}

function closeModal() {
  modal.setAttribute('hidden', '');
  trigger.focus();
}

Skróty klawiaturowe

Implementuj skróty klawiaturowe za pomocą odbiorników zdarzeń:

document.addEventListener('keydown', (e) => {
  // Close modal on Escape:
  if (e.key === 'Escape') closeModal();

  // Navigate tabs with arrow keys:
  if (e.key === 'ArrowRight') focusNextTab();
  if (e.key === 'ArrowLeft') focusPrevTab();

  // Submit form on Enter (default behavior in inputs):
  // Nothing needed — browser handles this
});

Testowanie nawigacji za pomocą klawiatury

Jak testować dostępność klawiaturową:

Odłóż mysz i korzystaj wyłącznie z klawiatury
Naciśnij Tab — czy możesz dotrzeć do każdego elementu interaktywnego?
Czy wskaźnik fokusu jest zawsze widoczny?
Czy kolejność tabulacji jest logiczna?
Czy możesz korzystać ze wszystkich funkcji (formularzy, okien modalnych, menu rozwijanych) bez myszy?
Naciśnij Shift+Tab, aby poruszać się wstecz

Szybkie sprawdzenie

Jakiej właściwości CSS nie należy nigdy usuwać ze wszystkich elementów, jeśli zależy nam na dostępności klawiaturowej?

Odpowiedz w interaktywnej lekcji

Podsumowanie: nawigacja za pomocą klawiatury

Najważniejsze zasady dotyczące dostępności klawiaturowej:

Do każdego elementu interaktywnego musi można dotrzeć za pomocą klawisza Tab
Kolejność DOM = kolejność tabulacji — dopasuj ją do układu wizualnego
Nigdy nie usuwaj obramowania fokusu — używaj :focus-visible do tworzenia niestandardowych stylów
Linki pomijania pozwalają ominąć powtarzalną nawigację
W oknach modalnych stosuj pułapkę fokusu, a po ich zamknięciu przywracaj fokus
Testuj witrynę, korzystając wyłącznie z klawiatury

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 40
Lekcje: 159

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Nawigacja klawiaturą i kolejność fokusu” jest bezpłatna?

Tak — pełny tekst „Nawigacja klawiaturą i kolejność fokusu” 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 HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Nawigacja klawiaturą i kolejność fokusu”?

Zapewnianie dostępu do wszystkich funkcji za pomocą klawiatury w logicznej kolejności Ćwiczysz HTML 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ąć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML 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 kolejność fokusu”?

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 HTML Academy?

Tak. Każda lekcja HTML 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

Dlaczego dostępność ma znaczenie — poziomy WCAG
Hierarchia nagłówków dla czytników ekranu
Tekst alternatywny obrazów — kiedy i jak go stosować
Nawigacja klawiaturą i kolejność fokusu

← Powrót do HTML Academy