Zrozumiałość · Poziom A

3.2.1 Po otrzymaniu fokusu

Fokus ma pomagać w nawigacji, a nie zaskakiwać zmianą strony.

Krótko

Gdy element tylko otrzyma fokus, strona nie może automatycznie przenosić użytkownika, otwierać okna, wysyłać formularza ani przesuwać fokusu w inne miejsce.

Problem w praktyce

Osoba używa klawiatury i przechodzi tabulatorem przez formularz. Po wejściu fokusu w pole „Kod pocztowy” otwiera się modal z pomocą i fokus trafia do modala. Użytkownik nie wybrał tej akcji, a strona zmieniła kontekst.

To kryterium nie ocenia, czy fokus jest dobrze widoczny. Chodzi o przewidywalność: samo otrzymanie fokusu nie może uruchamiać dużej zmiany.

Kogo to dotyczy

  • Osób korzystających z klawiatury, przełączników albo alternatywnych urządzeń wskazujących.
  • Osób niewidomych i słabowidzących, które mogą nie zauważyć, że strona nagle się zmieniła.
  • Osób z trudnościami poznawczymi, dla których nieoczekiwany skok utrudnia wykonanie zadania.
  • Użytkowników powiększenia ekranu, którzy widzą tylko fragment strony.

Dobry przykład

  • Po wejściu fokusu w pole formularza pokazuje się krótka podpowiedź obok pola, ale fokus zostaje w tym samym miejscu.
  • Lista rozwijana nie przenosi na inną stronę, dopóki użytkownik nie wybierze opcji i nie aktywuje przycisku.
  • Link otwiera nową stronę dopiero po aktywacji linku, nie po samym fokusie.
  • Fokus na zakładce nie przełącza automatycznie całego widoku, jeśli interfejs wymaga aktywacji Enterem albo Spacją.

Zły przykład

  • Fokus na polu formularza automatycznie otwiera nowe okno pomocy.
  • Fokus na elemencie menu od razu przenosi użytkownika na inną podstronę.
  • Fokus na ostatnim polu formularza automatycznie wysyła formularz.
  • Skrypt usuwa fokus z elementu natychmiast po jego otrzymaniu.

Przykłady kodu

Dobry przykład: zmiana po aktywacji

Użytkownik sam uruchamia akcję przyciskiem.

Kod — HTML

<label for="destination">Wybierz dział</label>
<select id="destination" name="destination">
  <option value="kontakt">Kontakt</option>
  <option value="reklamacje">Reklamacje</option>
</select>
<button type="submit">Przejdź</button>

Zły przykład: przekierowanie po fokusie

Samo przejście tabulatorem do linku zmienia stronę.

Kod — JavaScript

const helpLink = document.querySelector(".help-link");

helpLink.addEventListener("focus", () => {
  window.location.href = "/pomoc";
});

Dobry przykład: podpowiedź bez zmiany kontekstu

Podpowiedź jest widoczna przy polu, ale nie przenosi fokusu i nie otwiera nowego widoku.

Kod — HTML

<label for="case-number">Numer sprawy</label>
<input id="case-number" name="case-number" aria-describedby="case-number-help">
<p id="case-number-help">Numer znajdziesz w potwierdzeniu zgłoszenia.</p>

Przykład graficzny

Źle

Tab → pole „E-mail” → otwiera się modal

Użytkownik chciał tylko przejść do pola, a strona zmieniła kontekst.

Dobrze

Tab → pole „E-mail” → fokus zostaje w polu

Dodatkowa pomoc może się pojawić obok, bez przejęcia kontroli.

Statyczne demo pokazuje różnicę między fokusem jako nawigacją a aktywacją działania.

Jak sprawdzić

  1. Przejdź przez stronę klawiszem Tab.
  2. Obserwuj, czy samo wejście fokusu w element zmienia stronę, otwiera okno, wysyła formularz albo przenosi fokus.
  3. Sprawdź pola formularzy, listy rozwijane, linki, menu i elementy pomocy.
  4. Jeśli pojawia się tylko dodatkowa treść, oceń, czy nie zmienia znaczenia strony i nie zabiera fokusu.
  5. Sprawdź, czy duża zmiana następuje dopiero po aktywacji elementu przez użytkownika.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • część podejrzanych skryptów reagujących na fokus,
  • nietypowe manipulacje fokusem,
  • część błędów z usuwaniem fokusu.

Automat nie oceni pewnie

  • czy zmiana jest zmianą kontekstu,
  • czy użytkownik został zaskoczony zachowaniem,
  • czy pojawienie się dodatkowej treści nadal jest przewidywalne.

Typowe błędy

  • Automatyczne przekierowanie po fokusie na pozycji menu.
  • Modal pomocy otwierany po wejściu do pola formularza.
  • Wysyłka formularza po samym fokusie na ostatnim polu.
  • Skrypt, który natychmiast usuwa fokus, bo „psuje wygląd”.