Funkcjonalność · Poziom A

2.4.3 Kolejność fokusu

Gdy użytkownik przechodzi po stronie klawiaturą, fokus powinien iść w logicznej kolejności zgodnej ze znaczeniem i obsługą strony.

Krótko

Gdy użytkownik przechodzi po stronie klawiaturą, fokus powinien iść w logicznej kolejności zgodnej ze znaczeniem i obsługą strony.

Problem w praktyce

Użytkownik naciska Tab i spodziewa się przechodzić przez stronę od góry do dołu oraz od lewej do prawej, zgodnie z układem i treścią. Jeśli fokus skacze przypadkowo, omija ważne elementy, wpada do stopki przed formularzem albo przechodzi za otwarty modal, użytkownik traci orientację.

W takiej sytuacji osoba korzystająca z klawiatury może nie wiedzieć, gdzie jest, co może aktywować i jak wrócić do zadania. 2.4.3 nie mówi o tym, czy fokus jest widoczny, tylko czy jego kolejność ma sens.

Kogo to dotyczy

  • Osób korzystających z klawiatury zamiast myszy.
  • Osób niewidomych korzystających z czytników ekranu.
  • Osób słabowidzących korzystających z powiększenia, które widzą tylko fragment strony naraz.
  • Osób z niepełnosprawnościami ruchowymi.
  • Osób korzystających z przełączników albo alternatywnych urządzeń wejścia.
  • Użytkowników zaawansowanych, którzy szybko poruszają się po formularzach i aplikacjach klawiaturą.

Dobry przykład

  • Fokus przechodzi po elementach w kolejności zgodnej z wizualnym układem strony.
  • Po otwarciu modala fokus trafia do modala.
  • Po zamknięciu modala fokus wraca do przycisku, który go otworzył.
  • W formularzu fokus przechodzi od pola do kolejnego pola i przycisku wysłania.
  • Elementy ukryte wizualnie nie są dostępne w kolejności fokusu.
  • Menu rozwijane nie wprowadza użytkownika w nieoczekiwane miejsce.

Zły przykład

  • Fokus najpierw trafia do stopki, potem do menu, potem do formularza.
  • Kolejność fokusu nie zgadza się z układem wizualnym.
  • Po otwarciu modala fokus zostaje na stronie pod spodem.
  • Po zamknięciu modala fokus znika albo wraca na początek strony.
  • Dodatni tabindex, na przykład tabindex="1" i tabindex="2", tworzy sztuczną kolejność.
  • Elementy niewidoczne albo schowane poza ekranem są nadal dostępne przez Tab.
  • CSS zmienia kolejność wizualną, ale DOM zostaje w innej kolejności.

Przykłady kodu

Dobry przykład: naturalna kolejność DOM

Kolejność linków w kodzie odpowiada kolejności, w jakiej użytkownik powinien je odwiedzać klawiaturą.

Kod — HTML

<nav aria-label="Główna nawigacja">
  <a href="/szkolenia">Szkolenia</a>
  <a href="/audyt">Audyt dostępności</a>
  <a href="/kontakt">Kontakt</a>
</nav>

Jak to działa

Przeglądarka przechodzi po linkach w naturalnej kolejności dokumentu, bez sztucznego sterowania fokusem.

Zły przykład: dodatni tabindex

Dodatnie wartości tabindex tworzą sztuczną kolejność fokusu i szybko prowadzą do chaosu. Zwykle należy ich unikać.

Kod — HTML

<a href="/kontakt" tabindex="3">Kontakt</a>
<a href="/szkolenia" tabindex="1">Szkolenia</a>
<a href="/audyt" tabindex="2">Audyt dostępności</a>

Jak to działa

Użytkownik klawiatury idzie według numerów, a nie według widocznej lub logicznej kolejności treści.

Dobry kierunek: modal i powrót fokusu

Po otwarciu modala fokus trafia do jego zawartości. Po zamknięciu wraca do elementu, który otworzył modal.

Kod — JavaScript

const openButton = document.querySelector("#open-modal");
const modal = document.querySelector("#dialog");
const closeButton = document.querySelector("#close-modal");

openButton.addEventListener("click", function () {
  modal.showModal();
  closeButton.focus();
});

closeButton.addEventListener("click", function () {
  modal.close();
  openButton.focus();
});

Uwaga

To przykład edukacyjny pokazujący zasadę zarządzania fokusem, a nie pełna biblioteka modalna.

Przykład graficzny

To jest statyczne demo edukacyjne. Numery pokazują kolejność przechodzenia fokusem, a nie działające elementy interfejsu.

Źle

  1. 1Stopka
  2. 2Menu
  3. 3Pole e-mail
  4. 4Wyślij

Problem: fokus zaczyna od miejsca, którego użytkownik się nie spodziewa.

Ryzykownie

  1. 1Karta B
  2. 2Karta A
  3. 3Karta C
  4. 4Szczegóły

Ryzyko: CSS może pokazywać elementy w innej kolejności niż DOM.

Dobrze

  1. 1Menu
  2. 2Pole e-mail
  3. 3Zgoda
  4. 4Wyślij

Kolejność wspiera zadanie: użytkownik idzie przez treść i formularz przewidywalnie.

Porównanie trzech wariantów kolejności fokusu. Demo pokazuje zasadę numerami i opisem, nie działającą interakcję.

Jak sprawdzić

  1. Otwórz stronę w przeglądarce.
  2. Odłóż mysz.
  3. Naciskaj Tab i obserwuj kolejność przechodzenia fokusu.
  4. Użyj Shift+Tab, żeby sprawdzić kolejność wsteczną.
  5. Sprawdź, czy kolejność fokusu odpowiada kolejności treści i układowi strony.
  6. Sprawdź menu, formularze, modale, popupy, cookie bannery, karuzele i komponenty rozwijane.
  7. Sprawdź, czy fokus nie trafia do elementów ukrytych lub niedostępnych wizualnie.
  8. Sprawdź, czy po zamknięciu modala, menu albo popupu fokus wraca w logiczne miejsce.
  9. Sprawdź, czy CSS nie zmienia kolejności wizualnej inaczej niż DOM.
  10. Nie oceniaj wyłącznie automatem. To kryterium wymaga testu manualnego.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • Część problemów z elementami interaktywnymi.
  • Niektóre przypadki dodatniego tabindex.
  • Część problemów z ukrytymi elementami.
  • Niektóre błędy struktury komponentów.

Automat nie oceni pewnie

  • Czy kolejność fokusu jest logiczna dla konkretnego zadania.
  • Czy użytkownik zachowuje orientację po otwarciu i zamknięciu modala.
  • Czy kolejność DOM odpowiada układowi wizualnemu.
  • Czy kolejność fokusu ma sens w złożonym formularzu.
  • Czy komponent dynamiczny zachowuje się przewidywalnie.

Typowe błędy

  • Używanie dodatnich wartości tabindex.
  • Ukryte elementy dostępne przez Tab.
  • Kolejność fokusu inna niż kolejność wizualna.
  • Modal, który nie przejmuje fokusu.
  • Fokus uciekający za modal.
  • Brak powrotu fokusu po zamknięciu popupu.
  • Formularze z chaotyczną kolejnością pól.
  • Zmiana kolejności elementów przez CSS bez zmiany kolejności DOM.
  • Komponenty SPA, które po zmianie widoku nie ustawiają fokusu w logicznym miejscu.