WCAG 2.4.3: Kolejność fokusu

WCAG 2.4.3 Kolejność Fokusu: Zapewnienie Logicznej Nawigacji

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.

Wymagania Kryterium Sukcesu WCAG 2.4.3

Oficjalne sformułowanie kryterium sukcesu WCAG 2.4.3 Kolejność Fokusu brzmi:

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 skutecznie z nią interagować. 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.

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .item {
    padding: 15px;
    border: 1px solid blue;
    background-color: lightblue;
    flex: 1 1 calc(33% - 20px); /* 3 items per row */
  }
</style>

<div class="container">
  <a href="#" class="item">Link A</a>
  <a href="#" class="item">Link B</a>
  <a href="#" class="item">Link C</a>
  <a href="#" class="item">Link D</a>
  <a href="#" class="item">Link E</a>
  <a href="#" class="item">Link F</a>
</div>
        

<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>
        

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.

<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>
        

.custom-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  display: inline-block;
}
.custom-button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}
        

// 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
  }
});
        

<form>
  <input type="text" id="name" name="name" tabindex="2"> <label for="name">Imię:</label><br>
  <input type="email" id="email" name="email" tabindex="1"> <label for="email">E-mail:</label><br>
  <input type="submit" value="Wyślij" tabindex="3">
</form>
        

Przykład 3: Dynamiczne elementy (Modal)

Modale i inne nakładki wymagają szczególnej uwagi w zarządzaniu fokusem.

<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>
        

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
        

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');
        

<button id="badOpenModalBtn">Otwórz Niepoprawny Modal</button>
<a href="#">Link pod modalem 1</a>
<a href="#">Link pod modalem 2</a>

<div id="badModal" class="modal" style="display:none;">
  <div class="modal-content">
    <h2>Niepoprawny Modal</h2>
    <p>Treść niepoprawnego modala.</p>
    <input type="text" placeholder="Pole tekstowe">
    <button id="badCloseModalBtn">Zamknij</button>
  </div>
</div>
        

/* Ten sam CSS jak w przykładzie prawidłowym */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
        

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);
        

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.