Najczęściej zadawane pytania i odpowiedzi (FAQ) dotyczące WCAG 2.1 (punkty 2.1–2.5)

Dostępność klawiaturowa (2.1)

Czym jest „dostępność klawiaturowa” i dlaczego jest istotna?

Dostępność klawiaturowa oznacza, że wszystkie elementy interaktywne strony (np. linki, przyciski, pola formularzy, elementy nawigacyjne) można obsługiwać wyłącznie przy użyciu klawiatury (czyli bez myszki). Jest to kluczowe dla osób, które z różnych przyczyn nie mogą korzystać z myszy – np. użytkownicy niewidomi, słabowidzący, z niepełnosprawnością ruchową czy korzystający z alternatywnych urządzeń wejściowych.

Jak sprawdzić, czy wszystkie elementy interaktywne są dostępne klawiszem Tab?

• Po wczytaniu strony naciśnij kolejno klawisz Tab (lub Shift+Tab, żeby poruszać się wstecz).
• Zwróć uwagę, czy fokus (obrys lub inny wskaźnik) przechodzi na każdy interaktywny element (link, przycisk, pole formularza).
• Jeżeli pewien element nie otrzymuje fokusu, należy sprawdzić w kodzie HTML/CSS, czy ma ustawiony odpowiedni atrybut (np. tabindex="0" dla elementów customowych) i czy nie jest ukryty (display: none / visibility: hidden).

Co to są „pułapki klawiaturowe” i jak ich unikać?

„Pułapka klawiaturowa” to sytuacja, w której użytkownik, przechodząc klawiszem Tab do pewnego interaktywnego elementu (np. modal, dropdown, niestandardowy slider), nie może wydostać się z niego przy użyciu klawiatury (brak możliwości użycia Tab lub Shift+Tab, brak klawisza Esc). Aby unikać pułapek:

1. Po otwarciu modala (lub innego kontekstu), fokus powinien automatycznie przenieść się do pierwszego logicznego elementu w modalnym oknie.
2. W modalach zawsze umieścić przycisk zamknięcia („X”) z klawiaturową etykietą (np. aria-label="Zamknij dialog").
3. Obsłużyć klawisz Esc tak, by zamykał modal i przywracał fokus do elementu źródłowego (np. przycisku „Otwórz”).
4. W dropdownach i customowych widgetach umożliwić Tab lub Shift+Tab, by użytkownik mógł opuścić dany kontekst i wrócić do reszty strony.

Elastyczność czasu (2.2)

Czym jest „dostosowanie limitu czasu” i kiedy należy je zastosować?

Dostosowanie limitu czasu dotyczy sytuacji, gdy użytkownik musi wykonać zadanie (np. wypełnić formularz, test online) w określonym czasie. Zgodnie z WCAG 2.1 punkt 2.2.1, jeżeli strona/aplikacja narzuca limit czasu, użytkownik powinien mieć możliwość:

• wyłączenia limitu w całości, lub
• przedłużenia czasu (np. dodania kolejnych minut), lub
• wstrzymania odliczania (pauzy).

Stosujemy to w:

• systemach rejestracji online, które automatycznie logują użytkownika po określonym czasie braku aktywności,
• testach lub quizach z podanym limitem czasowym,
• bankowości internetowej i formularzach płatniczych.

Jak sprawdzić, czy można wyłączyć lub przedłużyć limit czasu?

1. W trakcie wykonywania zadania w aplikacji (np. wypełniania formularza) sprawdź, czy pojawia się licznik odliczający czas.
2. Upewnij się, że:

• Obok licznika jest przycisk „Pauza”, „Stop” lub „Ukryj licznik”.
• Alternatywnie: przycisk „Przedłuż czas” (np. „Daj mi 5 dodatkowych minut”).
• Jeżeli nie można wyłączyć limitu, system powinien automatycznie wysłać powiadomienie (np. „Chcesz przedłużyć sesję?”) na odpowiednio wczesnym etapie (np. 2 minuty wcześniej).

1. W dokumentacji lub pomocy aplikacji powinna być wyraźna instrukcja, jak zarządzać limitem czasu.

Kiedy „Pause/Stop” jest wymagane dla treści ruchomych (> 5 s)?

Zgodnie z WCAG 2.1 punkt 2.2.2, gdy na stronie pojawia się jakakolwiek automatycznie odtwarzana lub animowana treść trwająca dłużej niż 5 sekund – np. karuzela obrazków, animowany banner, ticker z wiadomościami – użytkownik musi mieć możliwość:

1. Wstrzymania animacji (przycisk “Pause”).
2. Zatrzymania animacji na stałe (przycisk “Stop”).
3. Wyłączenia tej funkcjonalności w ustawieniach (jeśli jest to np. globalny slider), tak by animacja nie uruchamiała się automatycznie przy każdym wejściu.

Przykłady:

• Slider na stronie głównej zmieniający obrazki co 7 sekund → powinien mieć widoczny przycisk pauzy lub stop.
• Reklama GIF lub animowany baner → opcja wyłączenia lub przycisk zatrzymania.

Unikanie napadów padaczkowych (2.3)

O czym mówi punkt 2.3.1 „Miganie (Three Flashes or Below Threshold)”?

Punkt 2.3.1 zabrania stosowania migających elementów (animacji, GIF-ów, reklam) o częstotliwości między 3 a 55 Hz, ponieważ to może wywołać napady padaczkowe u wrażliwych użytkowników. W praktyce oznacza to:

• Brak elementów, które w ciągu sekundy migałyby między stanem widocznym i niewidocznym częściej niż 3 razy i wolniej niż 55 razy.
• Jeżeli miganie jest niezbędne (np. element ostrzegawczy), użytkownik musi mieć możliwość zatrzymania animacji lub zastąpienia jej statycznym obrazem.

Jak zidentyfikować migające elementy i sprawdzić ich częstotliwość?

1. Przejrzyj arkusze CSS (szczególnie reguły @keyframes) i skrypty JS, które definiują animacje. Zwróć uwagę na parametry animation-duration, animation-iteration-count, a także transition.
2. Użyj narzędzi deweloperskich (np. Chrome DevTools → zakładka „Animations”) – możesz tam podejrzeć czas trwania klatki i liczbę powtórzeń.

3. W przypadku zewnętrznych reklam czy GIF-ów:

   • Sprawdź specyfikację dostawcy reklamy (czy animacja nie przekracza progu 3–55 Hz).
   • Jeżeli nie masz kontroli nad animacją, wprowadź możliwość wyłączenia lub zastąpienia statycznym obrazem (np. przyciskiem Stop).
4. Przetestuj wizualnie – nagraj ekran krótkim nagraniem wideo i policz wyświetlane błyski na sekundę (liczba jasnych klatek/minus ciemne).

Nawigacja i odnajdywalność (2.4)

Czym jest „Skip link” i kiedy należy go stosować? 

„Skip link” (link „Pomiń do treści”) umożliwia użytkownikom omijanie powtarzalnych bloków nawigacji (nagłówek z menu, pasek boczny) i szybkie przejście do głównej zawartości. Zgodnie z WCAG 2.1 punkt 2.4.1, każdy serwis powinien oferować taki link na początku strony HTML, dostępny po naciśnięciu Tab. Fokus powinien przejść bezpośrednio do elementu

Jak zweryfikować kolejność fokusu (2.4.3)?

1. Przyciskaj kolejno Tab (lub Shift+Tab) i obserwuj, czy fokus porusza się w kolejności zgodnej z układem wizualnym (z góry w dół, z lewej w prawo).
2. Upewnij się, że fokus nie trafia na elementy ukryte (display: none, visibility: hidden) lub poza obszar treści.
3. W przypadku niestandardowych widgetów (np. karuzele, panele akordeonu) sprawdź, czy fokus najpierw wchodzi do widgetu, a po jego opuszczeniu wraca do kolejnego elementu strony logicznie położonego w drzewie DOM.
4. Unikaj używania tabindex wartości dodatnich (np. tabindex="1"), bo może to zaburzyć naturalną kolejność; najlepiej stosować tabindex="0" lub -1 (tylko w razie konieczności wyłączenia z sekwencji).

Jak zapewnić, by cel linku był zawsze jasny (2.4.4)? 

• Każdy link powinien mieć opisowy tekst: zamiast „Kliknij tutaj” lepiej „Kliknij tutaj, aby pobrać raport roczny”.
• Jeśli link jest reprezentowany jedynie przez ikonę (np. kosz na śmieci), musimy dodać do niego atrybut aria-label="Usuń element" lub ukryty tekst (Usuń element).
• W liście wielu podobnych linków („Więcej”, „Szczegóły”), należy rozszerzyć ich treść lub dodać aria-label (np. „Więcej o produkcie A”, „Więcej o produkcie B”).

Co oznacza „wiele sposobów nawigacji” (2.4.5) i jak to wdrożyć?

Zgodnie z WCAG 2.1 na poziomie AA, każda strona powinna być osiągalna z co najmniej dwóch różnych punktów nawigacyjnych. Przykłady:

1. Menu główne (np. w nagłówku strony) + linki w stopce (np. odnośnik do tej samej podstrony).
2. Link do „Mapa witryny” (sitemap) + wyszukiwarka (search).
3. Breadcrumbs (okruszki nawigacyjne) + dodatkowy bloczek „Powiązane treści” w sidebarze.
   Dzięki temu, jeśli użytkownik nie znajdzie danej strony przez menu, może skorzystać z wyszukiwarki lub odnośnika w stopce.

Jak sprawdzić widoczność fokusu i spełnienie wymagań kontrastu (2.4.7)? 

1. Najprostszy test: użyj klawisza Tab, by przechodzić po stronie — czy widać wyraźnie, na którym elemencie obecnie jest fokus?
2. Sprawdź CSS danej strony: czy elementy interaktywne mają styl outline lub box-shadow w stanie fokus?
3. Zmierz kontrast pomiędzy wskaźnikiem fokusu (np. kolor obramowania) a tłem – musi wynosić co najmniej 3:1 (narzędzia: Color Contrast Checker, ARC Toolkit).
4. Przetestuj w trybie wysokiego kontrastu (np. Windows “High Contrast Mode” lub ustawienia systemowe w macOS), by upewnić się, że fokus nie „znika” w tych wariantach.

Różnorodność sposobów wprowadzania danych (2.5)

Co to są alternatywy dla gestów dotykowych (2.5.1) i dlaczego są potrzebne?

W aplikacjach lub na stronach mobilnych zdarza się, że niektóre czynności wykonywane są za pomocą gestów (pinch-to-zoom, rotate, swipe). Z punktu widzenia dostępności wymagane jest, by istniała alternatywa do obsługi tej samej funkcji, np.:

• Suwak lub przyciski „+”/„–” zamiast gestu pinch do zmiany rozmiaru wykresu.
• Strzałki lub przyciski „Następny”/„Poprzedni” zamiast swipe w galerii zdjęć.
  Zapewnia to także kompatybilność z urządzeniami, które nie obsługują multitouch lub gdy użytkownik ma ograniczoną zdolność do wykonywania gestów.

Jak zapewnić, żeby tekst widoczny był zgodny z aria-label (2.5.2)?

Punkt „Label in Name” (2.5.2) wymaga, aby etykieta widoczna („text label”) była taka sama jak tekst definiowany w aria-label lub aria-labelledby. Chodzi o spójny przekaz – przykłady:

• Przycisk z tekstem „Dodaj do koszyka” → aria-label="Dodaj do koszyka" (bez dodatkowych słów typu „Przycisk Dodaj do koszyka”).
• Jeśli używamy ikony + tekst ukryty dla czytników ekranu:
• Jeżeli treść przycisku dynamicznie się zmienia (np. „Odtwórz” → „Pauza”), aria-label powinno być na bieżąco aktualizowane.

Jak zmierzyć, czy klikany obszar ma minimalny rozmiar 44×44 px (2.5.3)? 

1. W narzędziach developerskich (np. Chrome DevTools) wybierz dany element interaktywny i w konsoli wywołaj np. getComputedStyle(element).width oraz .height.
2. Sprawdź, czy wymiary (lub wymiary przekroju z paddingiem) wynoszą co najmniej 44×44 px. Jeżeli nie, dodaj padding lub powiększ przycisk/ikonę.
3. Na urządzeniach mobilnych (np. emulatory w DevTools lub fizyczne telefony) przekonaj się, czy palec łatwo trafi w obszar przycisku – zalecenie to unika przypadkowych kliknięć.
4. W przypadku elementów blisko siebie (np. ikony w tabeli): upewnij się, że między nimi jest co najmniej 8 px odstępu, by palec nie omyłkowo nie trafił w sąsiedni element.

Podsumowanie najważniejszych pytań i odpowiedzi

1. Dlaczego trzeba wspierać obsługę klawiatury?
   – Dla użytkowników z ograniczoną motoryką i dla osób korzystających z czytników ekranu.
2. Co to jest pułapka klawiaturowa i jak jej unikać?
   – To sytuacja, w której użytkownik nie może opuścić pewnego obszaru (modal, dropdown) klawiaturą; aby jej uniknąć, zawsze dodaj klawisz zamknięcia (Esc) i pozwól na Tab/Shift+Tab.
3. Kiedy stosować pauzę/stop dla animacji?
   – Gdy animacja trwa dłużej niż 5 sekund (karuzele, tickery, automatyczne slideshow’y).
4. Jak chronić przed migotaniem wywołującym napady?
   – Nie stosuj migoczących elementów w zakresie 3–55 Hz; jeśli muszą występować, dodaj możliwość wyłączenia animacji lub zamień na obraz statyczny.
5. Co to jest skip link i gdzie go umieścić?
   – To link „Pomiń do treści” umieszczony na początku kodu HTML, widoczny po naciśnięciu Tab, przenoszący fokus do
   .
6. Co oznacza spójność etykiet (Label in Name)?
   – Tekst widoczny elementu (np. przycisku) musi być identyczny jak wartość aria-label, żeby użytkownicy głosowi nie mieli rozbieżności.
7. Jaki jest minimalny rozmiar dotykowy obszaru?
   – 44×44 CSS px, aby zapewnić łatwe trafianie palcem i ograniczyć pomyłki.