Kryterium sukcesu WCAG 2.4.3, znane jako „Kolejność fokusu”, jest fundamentalne dla zapewnienia dostępności stron internetowych, szczególnie dla użytkowników polegających na nawigacji klawiaturą. Określa ono, że jeśli strona internetowa może być nawigowana sekwencyjnie, a kolejność nawigacji wpływa na znaczenie lub działanie, komponenty, na które można ustawić fokus (np. linki, przyciski, pola formularzy), muszą otrzymywać fokus w kolejności, która zachowuje ich znaczenie i funkcjonalność. Innymi słowy, kolejność, w jakiej użytkownik przesuwa fokus za pomocą klawisza Tab, powinna być intuicyjna i przewidywalna, odzwierciedlając logiczną strukturę treści.
2.4.3 Kolejność fokusu (Poziom A): Jeśli strona internetowa może być nawigowana sekwencyjnie, a kolejność nawigacji wpływa na znaczenie lub działanie, komponenty, na które można ustawić fokus, otrzymują fokus w kolejności, która zachowuje znaczenie i funkcjonalność.
Oznacza to, że kolejność, w jakiej elementy interaktywne na stronie otrzymują fokus, powinna odpowiadać logicznej kolejności odczytu i działania. Zazwyczaj jest to kolejność, w jakiej elementy pojawiają się w kodzie źródłowym (DOM), która powinna być spójna z wizualnym układem strony.
Dlaczego Kolejność Fokusu Ma Znaczenie? (Wpływ na Dostępność)
Logiczna kolejność fokusu jest kluczowa dla wielu grup użytkowników:
Użytkownicy nawigujący klawiaturą: Osoby, które nie mogą lub nie chcą używać myszy (np. z powodu niepełnosprawności ruchowej, uszkodzonej myszy), polegają wyłącznie na klawiaturze do interakcji ze stroną. Jeśli kolejność tabulacji jest nielogiczna, nawigacja staje się frustrująca, czasochłonna, a czasem niemożliwa.
Użytkownicy czytników ekranu: Czytniki ekranu interpretują stronę w kolejności, w jakiej elementy pojawiają się w DOM. Jeśli kolejność DOM nie odpowiada wizualnej i logicznej strukturze, czytnik ekranu przeskakuje między niezwiązanymi ze sobą sekcjami, dezorientując użytkownika i utrudniając zrozumienie kontekstu.
Osoby z niepełnosprawnościami poznawczymi: Przewidywalna i spójna kolejność nawigacji zmniejsza obciążenie poznawcze, pomagając im zrozumieć strukturę strony i sprawnie się po niej poruszać. Nielogiczne skoki fokusu mogą prowadzić do zagubienia i frustracji.
Wszyscy użytkownicy: Nawet osoby bez zdiagnozowanych niepełnosprawności docenią intuicyjną nawigację klawiaturą, która jest często szybsza dla doświadczonych użytkowników.
Praktyczne Wskazówki Dotyczące Zgodności
Aby zapewnić zgodność z WCAG 2.4.3, należy przestrzegać następujących zasad:
Naturalna kolejność DOM: Zawsze staraj się, aby kolejność elementów interaktywnych w kodzie HTML (Document Object Model) odpowiadała ich wizualnej, logicznej kolejności na stronie. Przeglądarki domyślnie ustawiają fokus w kolejności, w jakiej elementy pojawiają się w DOM.
Unikaj atrybutu tabindex z wartością większą niż 0: Stosowanie tabindex="1", tabindex="2" itd. jest zdecydowanie odradzane, chyba że jest to absolutnie konieczne i świadomie zarządzane w bardzo specyficznych przypadkach. Zmusza to fokus do przeskakiwania po stronie w niestandardowej kolejności, co może być mylące i trudne do utrzymania.
Używaj tabindex="0" dla elementów niestandardowych: Jeśli tworzysz niestandardowy komponent interaktywny (np. <div>, które działa jak przycisk), nadaj mu tabindex="0", aby stał się fokusowalny i znajdował się w naturalnej kolejności tabulacji.
Używaj tabindex="-1" do zarządzania fokusem programowo: Ten atrybut sprawia, że element nie jest dostępny w naturalnej kolejności tabulacji, ale może otrzymać fokus za pomocą JavaScript (np. element.focus()). Jest to przydatne do przenoszenia fokusu do dynamicznie pojawiających się treści, takich jak modale czy komunikaty.
Testuj nawigację klawiaturą: Regularnie testuj swoją stronę, używając tylko klawisza Tab (i Shift + Tab do cofania) oraz klawiszy strzałek (dla komponentów takich jak grupy przycisków radiowych czy menu). Upewnij się, że możesz dotrzeć do wszystkich interaktywnych elementów i użyć ich w logicznej kolejności.
Zarządzaj fokusem w dynamicznych komponentach: W przypadku modali, okien dialogowych, rozwijanych menu czy zakładek, upewnij się, że fokus jest prawidłowo przenoszony do nowo pojawiających się treści i wraca do miejsca, z którego pochodził, po zamknięciu komponentu. Często wymaga to pułapki fokusu (focus trap), aby zapobiec ucieczce fokusu poza aktywny komponent.
Przykłady Prawidłowej i Nieprawidłowej Implementacji
Przykład 1: Prosta nawigacja i układ
Ten przykład ilustruje, jak kolejność elementów w DOM powinna odpowiadać ich kolejności wizualnej.
Prawidłowa kolejność fokusu (DOM zgodny z wizualnym)
W tym przykładzie, pomimo użycia CSS do układu, kolejność elementów w HTML jest logiczna i odpowiada naturalnemu przepływowi czytania od lewej do prawej, od góry do dołu.
Kolejność tabulacji: Link A, Link B, Link C, Link D, Link E, Link F. Jest to zgodne z wizualnym ułożeniem.
Nieprawidłowa kolejność fokusu (DOM niezgodny z wizualnym)
Tutaj kolejność w DOM jest inna niż wizualna, co może dezorientować użytkowników klawiatury. Nawet jeśli wizualnie elementy są obok siebie, tabulacja skacze w innej kolejności.
<style>
.container {
/* Założenie, że CSS zmienia wizualną kolejność, np. za pomocą grid-template-areas,
lub floatów, które nie odzwierciedlają DOM */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.item-a { grid-area: 1 / 1; }
.item-b { grid-area: 1 / 2; }
.item-c { grid-area: 2 / 1; } /* Wizualnie C jest pod A */
.item-d { grid-area: 2 / 2; } /* Wizualnie D jest pod B */
.item {
padding: 15px;
border: 1px solid red;
background-color: salmon;
}
</style>
<div class="container">
<!-- W DOM: A, B, D, C. Wizualnie: A, B (pierwszy wiersz), C, D (drugi wiersz) -->
<a href="#" class="item item-a">Link A</a>
<a href="#" class="item item-b">Link B</a>
<a href="#" class="item item-d">Link D</a> <!-- Ten element powinien być po C w DOM -->
<a href="#" class="item item-c">Link C</a>
</div>
Kolejność tabulacji: Link A, Link B, Link D, Link C. Użytkownik, widząc Link C pod Link A, a Link D pod Link B, spodziewa się tabulacji A → B → C → D, a nie A → B → D → C.
Przykład 2: Formularz z niestandardowym elementem
Ten przykład pokazuje, jak prawidłowo obsługiwać fokus w formularzach i dla elementów, które nie są domyślnie fokusowalne.
Prawidłowy formularz (pola w logicznej kolejności, niestandardowy przycisk)
<form>
<label for="name">Imię i Nazwisko:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Adres E-mail:</label><br>
<input type="email" id="email" name="email"><br>
<label for="message">Wiadomość:</label><br>
<textarea id="message" name="message"></textarea><br>
<!-- Niestandardowy przycisk, który jest fokusowalny dzięki tabindex="0" -->
<div role="button" tabindex="0" aria-label="Wyślij formularz" class="custom-button">Wyślij</div>
<!-- Standardowy przycisk submit, również w logicznej kolejności -->
<button type="submit">Zapisz</button>
</form>
// Dla custom-button: Obsługa Enter/Space jako kliknięcia
document.querySelector('.custom-button').addEventListener('keydown', function(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault(); // Zapobiega przewijaniu strony dla spacji
alert('Niestandardowy przycisk został kliknięty!');
// Tutaj normalnie byłaby logika wysyłania formularza lub inna akcja
}
});
Kolejność tabulacji: Imię i Nazwisko → Adres E-mail → Wiadomość → Niestandardowy przycisk "Wyślij" → Przycisk "Zapisz". Jest to logiczna, przewidywalna kolejność.
Nieprawidłowy formularz (problemy z kolejnością tabindex, brakiem etykiet)
Kolejność tabulacji: E-mail (tabindex="1") → Imię (tabindex="2") → Wyślij (tabindex="3"). To jest sprzeczne z wizualną kolejnością i naturalnym przepływem formularza, gdzie Imię jest pierwsze. Dodatkowo, etykiety są po polach, co również jest problematyczne dla czytników ekranu.
Przykład 3: Dynamiczne elementy (Modal)
Modale i inne nakładki wymagają szczególnej uwagi w zarządzaniu fokusem.
Prawidłowe zarządzanie fokusem w modalu (pułapka fokusu)
Prawidłowo zaimplementowany modal otwiera się, przenosi fokus do swojego wnętrza i "zatrzymuje" fokus w nim, uniemożliwiając użytkownikowi klawiatury przypadkowe przejście do elementów znajdujących się pod modalem. Po zamknięciu modala, fokus wraca do elementu, który go otworzył.
<button id="openModalBtn">Otwórz Modal</button>
<div id="myModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" style="display:none;">
<div class="modal-content">
<h2 id="modalTitle">Tytuł Modala</h2>
<p>To jest treść modala. Możesz nacisnąć Tab, aby nawigować po jego elementach.</p>
<input type="text" placeholder="Pole w modalu 1"><br>
<input type="text" placeholder="Pole w modalu 2"><br>
<button>Akcja 1</button>
<button id="closeModalBtn">Zamknij</button>
</div>
</div>
const openModalBtn = document.getElementById('openModalBtn');
const closeModalBtn = document.getElementById('closeModalBtn');
const myModal = document.getElementById('myModal');
let lastFocusedElement; // Do przechowywania elementu, który był fokusowany przed otwarciem modala
// Funkcja otwierająca modal
function openModal() {
lastFocusedElement = document.activeElement; // Zapisz aktualny fokus
myModal.style.display = 'flex';
myModal.setAttribute('aria-hidden', 'false');
// Przenieś fokus do pierwszego focusowalnego elementu w modalu lub samego modala
const focusableElementsInModal = myModal.querySelectorAll('a[href], button, input, textarea, select, [tabindex]:not([tabindex="-1"])');
if (focusableElementsInModal.length > 0) {
focusableElementsInModal[0].focus();
} else {
myModal.focus(); // Upewnij się, że modal jest fokusowalny (np. tabindex="-1" na samym modalu)
}
document.addEventListener('keydown', trapTabKey);
}
// Funkcja zamykająca modal
function closeModal() {
myModal.style.display = 'none';
myModal.setAttribute('aria-hidden', 'true');
document.removeEventListener('keydown', trapTabKey);
if (lastFocusedElement) {
lastFocusedElement.focus(); // Przywróć fokus
}
}
// Pułapka fokusu dla klawisza Tab
function trapTabKey(e) {
if (e.key === 'Tab') {
const focusableElements = myModal.querySelectorAll('a[href], button, input, textarea, select, [tabindex]:not([tabindex="-1"])');
const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];
if (e.shiftKey) { // Shift + Tab
if (document.activeElement === firstFocusableElement) {
lastFocusableElement.focus();
e.preventDefault();
}
} else { // Tab
if (document.activeElement === lastFocusableElement) {
firstFocusableElement.focus();
e.preventDefault();
}
}
}
if (e.key === 'Escape') { // Zamknij modal na klawisz Escape
closeModal();
}
}
openModalBtn.addEventListener('click', openModal);
closeModalBtn.addEventListener('click', closeModal);
// Ustawia tabindex="-1" na samym modalu, aby był programowo fokusowalny, ale nie w naturalnej kolejności
myModal.setAttribute('tabindex', '-1');
W tym przykładzie fokus jest logicznie przenoszony do modala, a następnie zablokowany w jego obrębie. Po zamknięciu modala, fokus wraca do przycisku "Otwórz Modal".
Nieprawidłowe zarządzanie fokusem w modalu (fokus ucieka)
W tym przypadku, po otwarciu modala, fokus przenosi się do niego, ale po dojściu do ostatniego elementu interaktywnego w modalu, naciśnięcie klawisza Tab przenosi fokus do elementów pod modalem, co może być niewidoczne i bardzo dezorientujące dla użytkownika.
const badOpenModalBtn = document.getElementById('badOpenModalBtn');
const badCloseModalBtn = document.getElementById('badCloseModalBtn');
const badModal = document.getElementById('badModal');
function openBadModal() {
badModal.style.display = 'flex';
// Fokus jest przenoszony do pierwszego elementu, ale nie ma pułapki
badModal.querySelector('input').focus();
}
function closeBadModal() {
badModal.style.display = 'none';
// Fokus nie wraca do elementu, który otworzył modal
}
badOpenModalBtn.addEventListener('click', openBadModal);
badCloseModalBtn.addEventListener('click', closeBadModal);
W tym przypadku po naciśnięciu Tab po przycisku "Zamknij" w modalu, fokus przeniesie się do "Link pod modalem 1" i "Link pod modalem 2", które są ukryte przez nakładkę modala, co jest niezgodne z WCAG 2.4.3.
Najlepsze Praktyki i Częste Pułapki
Zawsze polegaj na naturalnej kolejności DOM: To jest najprostszy i najbardziej niezawodny sposób na zapewnienie logicznej kolejności fokusu. Pisz HTML w kolejności, w jakiej chcesz, aby użytkownicy go postrzegali i z nim interagowali.
Unikaj tabindex z wartością większą niż 0: Użycie tabindex="1", tabindex="2" itp. jest prawie zawsze złym pomysłem. Takie podejście trudno jest utrzymać i łatwo o błędy.
Używaj tabindex="0" rozważnie: Tylko dla elementów, które powinny być fokusowalne, ale nie są domyślnie (np. niestandardowe kontrolki, które naśladują standardowe elementy interaktywne). Upewnij się, że dodajesz również odpowiednie role ARIA i obsługę zdarzeń klawiatury (Enter/Space).
Używaj tabindex="-1" do zarządzania fokusem: Jest to świetne narzędzie do programowego przenoszenia fokusu do dynamicznych treści (np. po otwarciu modala, wyświetleniu komunikatu o błędzie).
Testuj klawiaturą regularnie: Najlepszym sposobem na wykrycie problemów z kolejnością fokusu jest regularne testowanie całej strony za pomocą klawiatury. Spróbuj nawigować przez całą stronę, wypełniać formularze i używać wszystkich interaktywnych elementów.
Pamiętaj o treści generowanej dynamicznie: Modale, alerty, zakładki, rozwijane menu – wszystkie te elementy muszą być prawidłowo obsługiwane pod kątem fokusu. Pułapkowanie fokusu w modalach i przywracanie go po zamknięciu to kluczowe elementy.
Kierunek pisania (RTL): W językach pisanych od prawej do lewej (np. arabski, hebrajski), wizualna kolejność elementów jest odwrotna, ale logiczna kolejność w DOM nadal powinna być spójna z naturalnym przepływem czytania dla danego języka.
Podsumowanie
Kryterium WCAG 2.4.3 Kolejność fokusu jest niezmiernie ważne dla zapewnienia dostępności stron internetowych. Poprawna, logiczna i przewidywalna kolejność fokusu umożliwia efektywną nawigację klawiaturą i poprawia ogólne doświadczenie użytkownika dla wszystkich, zwłaszcza dla osób z niepełnosprawnościami. Projektując i implementując interfejsy, zawsze stawiaj na naturalną kolejność w DOM i testuj swoją pracę, używając wyłącznie klawiatury.
Pobierz dla Google Chrome 
Pobierz dla Edge 
Pobierz dla Firefox