WCAG 3.2.1: Po uzyskaniu fokusu

Kryterium sukcesu 3.2.1 'Po uzyskaniu fokusu’ na poziomie A standardu WCAG (Web Content Accessibility Guidelines) 2.0 oraz 2.1 jest kluczowe dla zapewnienia przewidywalnego i stabilnego środowiska dla wszystkich użytkowników. Mówi ono, że zmiana kontekstu nie jest inicjowana przez uzyskanie fokusu przez komponent. Oznacza to, że sam fakt przeniesienia fokusu (np. za pomocą klawisza Tab) na dany element interfejsu użytkownika nie powinien powodować istotnych, nieoczekiwanych zmian w zawartości, układzie strony ani w zachowaniu aplikacji.

Czym jest kryterium 3.2.1 Po uzyskaniu fokusu?

To kryterium ma na celu zapobieganie dezorientacji użytkowników, która może wynikać z automatycznych zmian na stronie, gdy tylko element interaktywny otrzyma fokus. Przykładowo, jeśli użytkownik nawigujący klawiaturą przeniesie fokus na pole formularza, a to spowoduje automatyczne wysłanie formularza lub otwarcie nowego okna, jest to naruszenie tej zasady. Użytkownik powinien zawsze mieć kontrolę nad interakcjami i być świadomym konsekwencji swoich działań.

Dlaczego to jest ważne? (Wpływ na dostępność)

Nieoczekiwane zmiany kontekstu wywołane wyłącznie uzyskaniem fokusu mogą być niezwykle dezorientujące i frustrujące dla wielu grup użytkowników. Dotyczy to w szczególności:

  • Użytkowników nawigujących klawiaturą: Osoby, które nie mogą używać myszy, polegają na klawiszu Tab (lub Shift+Tab) do przemieszczania fokusu między elementami interaktywnymi. Jeśli przeniesienie fokusu automatycznie wywołuje akcję (np. wysłanie formularza, otwarcie nowego okna), użytkownik traci kontrolę nad interakcją i może nie być w stanie cofnąć niechcianej operacji.
  • Użytkowników czytników ekranu: Gdy fokus zmienia się w nieprzewidziany sposób, czytnik ekranu może nagle zacząć odczytywać nową sekcję strony lub użytkownik może zostać przeniesiony do innej strony bez ostrzeżenia, co całkowicie zakłóca jego orientację w treści.
  • Użytkowników z dysfunkcjami poznawczymi: Nagłe, nieoczekiwane zmiany mogą być mylące i przeciążające poznawczo. Może to prowadzić do zagubienia, dezorientacji i niemożności ukończenia zadania.
  • Użytkownicy słabowidzących lub powiększeniem: Jeśli zmiana fokusu powoduje zmianę układu strony, ważne treści mogą nagle znaleźć się poza obszarem widzenia, zmuszając użytkownika do ponownego orientowania się na stronie.

Głównym celem tego kryterium jest zapewnienie przewidywalności i kontroli. Użytkownik powinien zawsze wiedzieć, czego spodziewać się po interakcji z elementami strony.

Wymagania Kryterium Sukcesu 3.2.1

Oficjalne brzmienie kryterium sukcesu 3.2.1 to: „Zmiana kontekstu nie jest inicjowana przez uzyskanie fokusu przez komponent.”

Aby w pełni zrozumieć to kryterium, należy wyjaśnić kluczowe terminy:

  • Zmiana kontekstu: Oznacza znaczącą zmianę w treści, która może dezorientować użytkownika, chyba że jest przewidywana. Przykłady obejmują:
    • Przejście do nowej strony.
    • Przesunięcie fokusu na inny komponent.
    • Znacząca zmiana treści strony (np. odświeżenie strony, wyświetlenie nowej sekcji, otwarcie wyskakującego okienka, zmiana układu).
    • Zmiana w celu lub funkcji komponentu.
  • Uzyskanie fokusu przez komponent: Oznacza sytuację, w której element interaktywny (np. pole formularza, przycisk, link) staje się aktywny i gotowy do interakcji, najczęściej poprzez nawigację klawiaturą (np. klawisz Tab) lub programowo.
  • Nie jest inicjowana: Akcja nie powinna być wywoływana tylko przez przeniesienie fokusu. Użytkownik musi wyraźnie zainicjować akcję, np. poprzez kliknięcie myszą, naciśnięcie klawisza Enter/Spacja, lub wybranie opcji z listy rozwijanej.

Krótko mówiąc: przeniesienie fokusu na element powinno tylko oznaczać, że użytkownik jest gotowy do interakcji z tym elementem, a nie że ta interakcja już się rozpoczęła lub coś się zmieniło.

Praktyczne wytyczne dotyczące zgodności

Aby zapewnić zgodność z WCAG 3.2.1, należy przestrzegać następujących zasad:

  • Unikaj automatycznego przesyłania formularzy: Pola formularza nie powinny automatycznie wysyłać formularza w momencie uzyskania fokusu. Przesłanie powinno następować po aktywacji przycisku „Wyślij”.
  • Nie otwieraj nowych okien ani kart: Uzyskanie fokusu na linku lub przycisku nie powinno automatycznie otwierać nowej karty przeglądarki ani nowego okna. Taka akcja powinna nastąpić dopiero po aktywacji elementu (np. kliknięcie, Enter).
  • Unikaj znaczących zmian treści lub odświeżania strony: Nie zmieniaj dynamicznie dużej części treści strony, nie ukrywaj ani nie pokazuj nowych, obszernych sekcji, ani nie odświeżaj strony tylko dlatego, że użytkownik przesunął fokus na dany element.
  • Kontroluj zmiany w widżetach: Elementy takie jak rozwijane listy (<select>) lub autouzupełnianie, które pokazują listę opcji po uzyskaniu fokusu, są dozwolone, o ile nie powodują innych, nieoczekiwanych zmian kontekstu poza wyświetleniem listy opcji. Samo wyświetlenie listy opcji do wyboru nie jest uznawane za „zmianę kontekstu”, która by dezorientowała. Jednak wybranie opcji z listy, która automatycznie wysyła formularz, byłoby problematyczne.
  • Rozróżnij styl wizualny od akcji: Możesz zmienić styl wizualny elementu po uzyskaniu fokusu (np. dodać ramkę, zmienić tło) – to jest oczekiwane i pomaga użytkownikom zorientować się, gdzie znajduje się fokus. Nie jest to zmiana kontekstu.

Przykłady implementacji

Przykład nieprawidłowy

Formularz automatycznie wysyłany po uzyskaniu fokusu

Ten przykład pokazuje pole tekstowe, które automatycznie wysyła formularz natychmiast po tym, jak użytkownik na nie przejdzie (np. za pomocą klawisza Tab).

<form id="myForm" action="/submit-data" method="post">
  <label for="searchField">Wyszukaj:</label>
  <input type="text" id="searchField" onfocus="document.getElementById('myForm').submit();">
</form>

Problem: Użytkownik klawiatury, docierając do pola, automatycznie wysyła formularz, co jest nieoczekiwaną zmianą kontekstu. Nie miał szansy na wpisanie danych ani świadome potwierdzenie akcji.

Link otwierający nowe okno po uzyskaniu fokusu

W tym przypadku link automatycznie otwiera nową kartę przeglądarki, gdy tylko fokus znajdzie się na nim, bez konieczności aktywowania go przez użytkownika.

<a href="new-page.html" onfocus="window.open(this.href, '_blank');">Otwórz nową stronę</a>

Problem: Użytkownik przechodzi do nowego okna, nie aktywując linku, co jest bardzo dezorientujące. Nagle traci on orientację w bieżącej karcie i może nie wiedzieć, skąd wzięła się nowa.

Zmiana treści sekcji po uzyskaniu fokusu

Poniższy przykład przedstawia przycisk, którego uzyskanie fokusu dynamicznie zmienia zawartość innej części strony.

<button id="toggleButton" onfocus="document.getElementById('contentArea').innerHTML = '<h3>Nowa, zmieniona treść</h3><p>Ta sekcja została zmieniona automatycznie.</p>';">Pokaż szczegóły</button>
<div id="contentArea"><p>Początkowa treść sekcji.</p></div>

Problem: Zawartość strony zmienia się bez wyraźnej akcji użytkownika innej niż przeniesienie fokusu. Może to spowodować, że użytkownik straci z oczu poprzednią treść lub dezorientuje się, dlaczego strona się zmieniła.

Przykład prawidłowy

Formularz wysyłany po aktywacji przycisku

W tym przykładzie formularz zostanie wysłany dopiero po świadomym kliknięciu przycisku „Szukaj” przez użytkownika.

<form action="/search" method="get">
  <label for="searchQuery">Wyszukaj:</label>
  <input type="text" id="searchQuery" name="q">
  <button type="submit">Szukaj</button>
</form>

Wyjaśnienie: Formularz zostanie wysłany dopiero po aktywacji przycisku „Szukaj” (np. naciśnięcie spacji/Enter), co jest oczekiwaną akcją użytkownika i nie zmienia kontekstu na samo uzyskanie fokusu na polu tekstowym.

Link otwierający nowe okno z ostrzeżeniem i aktywacją

Link otwiera nową kartę tylko po kliknięciu, a użytkownik jest o tym poinformowany.

<a href="new-page.html" target="_blank" title="Otworzy się w nowym oknie" rel="noopener noreferrer">Otwórz nową stronę (nowe okno)</a>

Wyjaśnienie: Użycie target="_blank" otwiera nowe okno po aktywacji linku. Atrybut title lub tekst „nowe okno” informuje użytkownika o konsekwencji. Ważne jest, że nie ma zmiany po samym fokusu, a tylko po aktywacji. Dodanie rel="noopener noreferrer" to dobra praktyka bezpieczeństwa.

Sekcja akordeonu rozwijająca się po kliknięciu

Sekcja z dodatkową treścią rozwija się dopiero po kliknięciu w nagłówek/przycisk.

<h3>
  <button aria-expanded="false" aria-controls="panel1" id="button1">
    Rozwiń sekcję 1
  </button>
</h3>
<div id="panel1" role="region" aria-labelledby="button1" aria-hidden="true" style="display: none;">
  <p>Treść sekcji 1, która jest ukryta domyślnie i pojawi się po aktywacji przycisku.</p>
</div>

<script>
  document.getElementById('button1').addEventListener('click', function() {
    const panel = document.getElementById('panel1');
    const isExpanded = this.getAttribute('aria-expanded') === 'true';
    this.setAttribute('aria-expanded', !isExpanded);
    panel.setAttribute('aria-hidden', isExpanded);
    panel.style.display = isExpanded ? 'none' : 'block';
  });
</script>

Wyjaśnienie: Treść jest widoczna dopiero po aktywacji przycisku (np. Enter lub Spacja), nie po samym uzyskaniu fokusu. Atrybuty ARIA zapewniają prawidłową informację dla czytników ekranu o stanie sekcji.

Najlepsze praktyki i typowe pułapki

  • Zawsze zakładaj intencję użytkownika: Pamiętaj, że przeniesienie fokusu (np. klawiszem Tab) na element to akt zbadania tego elementu, a niekoniecznie aktywowania go. Użytkownik musi mieć szansę na przemyślenie, zanim zdecyduje się na interakcję.
  • Rozróżnij „fokus” od „aktywacji”: Fokus to moment, gdy element jest gotowy do interakcji. Aktywacja to faktyczne wywołanie akcji (np. kliknięcie, naciśnięcie Enter/Spacja). Zmiany kontekstu powinny być inicjowane tylko przez aktywację.
  • Unikaj JavaScriptu zmieniającego DOM na zdarzeniu onfocus: Jeśli musisz dynamicznie modyfikować zawartość, upewnij się, że jest to kontrolowana i przewidywalna zmiana, która nie dezorientuje, i rozważ użycie zdarzenia onclick lub onkeypress dla istotnych akcji.
  • Ostrożność z atrybutem autofocus: Chociaż autofocus na elemencie formularza jest dozwolony, może być problematyczny dla niektórych użytkowników. Jeśli użyty na elemencie, który nie jest oczekiwany jako pierwszy interaktywny element na stronie, może przenieść fokus do nieoczekiwanego miejsca i zakłócić nawigację. Używaj go z umiarem i rozwagą, najlepiej w sytuacjach, gdzie jest to wyraźnie oczekiwane (np. pole wyszukiwania na stronie wyszukiwarki).
  • Dokładne testy nawigacji klawiaturą: Regularnie testuj całą stronę internetową, używając wyłącznie klawiatury (klawisz Tab, Shift+Tab, Enter, Spacja), aby upewnić się, że nie występują żadne nieoczekiwane zachowania po uzyskaniu fokusu.
  • Używaj ARIA dla wskazania zmian: Jeśli zmiana jest nieunikniona po aktywacji (np. sekcja akordeonu), użyj atrybutów ARIA (np. aria-expanded, aria-live), aby programowo zasygnalizować zmianę technologiom wspomagającym, ale to dotyczy zmian po aktywacji, nie po fokusu.

Podsumowanie

Kryterium sukcesu WCAG 3.2.1 „Po uzyskaniu fokusu” jest fundamentalne dla stworzenia dostępnego i użytecznego interfejsu. Zapewniając, że uzyskanie fokusu na elemencie nie wywołuje nieoczekiwanych zmian kontekstu, deweloperzy mogą znacząco poprawić przewidywalność i kontrolę dla wszystkich użytkowników, zwłaszcza tych polegających na nawigacji klawiaturą, czytnikach ekranu oraz osób z dysfunkcjami poznawczymi. Przestrzeganie tej zasady prowadzi do bardziej intuicyjnych i mniej frustrujących doświadczeń cyfrowych.

Powiązane wpisy

Nadal szukasz odpowiedzi?

Zapytaj naszych specjalistów używając czatu online.

Skontaktuj się z nami