Dobre praktyki

Pasek ciasteczek dostępny: zgoda RODO musi móc zostać odrzucona

Niedostępny pasek ciasteczek to nie tylko wada dostępności: narusza RODO, uniemożliwiając wyrażenie zgody wszystkim. Pomiędzy European Accessibility Act a obowiązkiem pisemnej zgody, Twój baner musi działać za pomocą klawiatury, powiększenia i przy minimalnym kontrastcie. Dowiedz się, jak ocenić go w kilka minut i poznaj siedem kluczowych punktów.

Krótka odpowiedź

Niedostępny pasek ciasteczek powoduje podwójną niezgodność: RODO unieważnia zgodę, której użytkownik nie może wyrazić (niemożność odmowy za pomocą klawiatury, niewystarczający kontrast, przycisk bez etykiety), a EAA nakazuje dostępność wszystkich elementów interfejsu. Siedem minimalnych sprawdzeń: widoczny focus przy otwarciu, pełna nawigacja klawiaturowa, kontrast 4,5:1, dostępne nazwy przycisków, odmowa równie łatwa jak akceptacja, brak pułapek focusu, czytelność przy powiększeniu 200 procent.

Dlaczego niedostępny pasek ciasteczek narusza RODO

RODO wymaga jawnej i swobodnej zgody. Zgoda jest jednak swobodna tylko wtedy, gdy odmowa jest równie łatwa jak akceptacja, a dostępna – gdy każdy może ją wyrazić: za pomocą klawiatury, czytnika ekranu, przy zaburzeniach wzroku czy drżeniach ruchowych. Jeśli przycisk „Odrzuć” nie jest dostępny w kolejności nawigacji klawiaturowej, ukryty pod 50 pikselami klikalnej treści, nie ma opisu (pusty lub brak atrybutu aria-label) albo ma kontrast 2:1 na białym tle, użytkownik z niepełnosprawnością technicznie nie może jej odrzucić: zebrana przez stronę zgoda nie jest zatem prawnie ważna.

CNIL, od swoich wytycznych z 2021 r. i potwierdzonych w 2023 r., uważa, że każda przeszkoda w wyrażaniu wyboru (zgoda lub odmowa) czyni ten wybór niezgodnym z przepisami. Dostępność nie jest już opcjonalna: to techniczny warunek wstępny samego RODO.

Dodatkowa warstwa zgodności: European Accessibility Act

EAA, który wejdzie w życie 28 czerwca 2025 r., nakłada na wszystkie strony internetowe i aplikacje w Europie obowiązek dostępności zgodnie z normą WCAG 2.1 na poziomie AA. Dotycz to również pasków cookie, które są pierwszymi elementami wyświetlanymi na stronie – jest to zatem pierwsza zgodność z EAA, którą Twoja strona prezentuje odwiedzającemu. Jeśli ta pierwsza warstwa zawiedzie, CNIL i organy ds. dostępności otrzymają natychmiastowy sygnał zaniedbania.

Kombinacja jest nieubłagana: niedostępny pasek cookie powoduje jednoczesne naruszenie na dwóch frontach (RODO i EAA). Zidentyfikowane usterki (kontrast, nawigacja klawiaturowa, etykietowanie) będą zgłaszane zarówno jako naruszenia zgody, jak i naruszenia EAA.

Siedem punktów do sprawdzenia w pasku ciasteczek

1. Widoczny focus przy otwarciu

Gdy pasek ciasteczek się wyświetla, focus klawiatury musi być obecny i widoczny na jednym z elementów paska (najczęściej na pierwszym przycisku lub przycisku zamknięcia). Zbyt wiele stron wyświetla pasek, ale pozostawia focus na tle: użytkownik korzystający z klawiatury nie wie, gdzie działać.

2. Kompletna nawigacja klawiaturowa

Przycisk Tab musi przechodzić przez wszystkie przyciski paska w logicznej kolejności (z lewa na prawo lub z góry na dół), a Enter musi aktywować przycisk z focusem. Pola wprowadzania i linki wewnątrz paska muszą być również dostępne. Enter (lub Spacja na przyciskach) musi działać.

3. Wystarczający kontrast kolorów

Tekst na tle: minimum 4,5:1 dla tekstu normalnego, 3:1 dla dużych znaków (18 pkt i pogrubione). Obramowania i elementy graficzne: 3:1. Biały pasek z jasnoszarym tekstem często nie spełnia tego testu. Półprzezroczyste przyciski na białym tle również nie spełniają tego wymogu.

4. Przyciski nazwane jasno i precyzyjnie

Każdy przycisk musi mieć widoczną etykietę ORAZ dostępną nazwę (atrybut aria-label, jeśli etykieta jest ikoną, lub widoczny tekst przycisku). Przycisk z samą ikoną „X” do zamknięcia musi mieć aria-label="Zamknij" lub równoważną alternatywę. Czytniki ekranu muszą odczytywać „Zaakceptuj wszystkie ciasteczka”, a nie „Przycisk”.

5. Odmowa równie dostępna jak akceptacja

RODO nakazuje. Przycisk „Odrzuć” nie może być mniejszą czcionką, ukryty za pośrednim linkiem ani schowany za kliknięciem wymagającym precyzji. Jeśli „Zaakceptuj” jest dostępny za pomocą klawiatury, „Odrzuć” również musi być, i wyraźnie widoczny. Żadna waga ani kolor nie mogą tworzyć fałszywej hierarchii.

6. Brak pułapek focusu

Pułapka focusu: gdy naciskasz Tab na końcu paska, focus nie może w nieskończoność wracać na początek ani blokować wyjścia z paska, jeśli pasek jest nadal widoczny. Focus musi móc opuścić pasek po podjęciu działania (zaakceptowaniu, odrzuceniu, zamknięciu).

7. Czytelność przy powiększeniu 200 procent

Przy powiększeniu 200 procent w przeglądarce tekst paska musi pozostać czytelny, a przyciski dostępne dla wskaźnika. Żadne niewidoczne przepełnienie, żadne nakładanie się tekstu. Użytkownik niedowidzący, który powiększa, nie może stracić możliwości odmowy.

Jak przetestować swój baner w jedną minutę

Klawiatura: otwórz swoją stronę, zamknij mysz. Naciśnij Tab – focus powinien pojawić się na banerze. Kontynuuj tabulację, przejdź przez przyciski, naciśnij Enter. Spróbuj odrzucić, a potem zaakceptować. Jeśli nie możesz dotrzeć do „Odrzuć” za pomocą klawiatury, twój baner nie spełnia wymagań.

Kontrast: zrób zrzut ekranu banera, wklej go do narzędzia online do sprawdzania kontrastu (WebAIM Contrast Checker, Accessible Colors), sprawdź, czy tekst i przyciski osiągają co najmniej 4,5:1. Jeśli wynik jest czerwony, popraw go.

Powiększenie: naciśnij Ctrl++ trzy razy (powiększenie do 200%). Baner powinien pozostać kompletny, czytelny, a wszystkie przyciski muszą być klikalne bez poziomego przewijania.

Czytnik ekranu: jeśli używasz przeglądarki z NVDA (Windows, darmowy) lub VoiceOver (Mac), aktywuj go i posłuchaj, co odczytuje. Przyciski muszą być nazwane w sposób jawny („ Zaakceptuj wszystkie ciasteczka „ a nie „ Przycisk „). Sekcje muszą mieć logiczną strukturę.

Zgodność na wyższym poziomie: testy manualne i zarządzanie

Te siedem punktów obejmuje błędy, które można zautomatyzować (kontrast, etykietowanie, nawigacja klawiaturowa, focus). Jednak pełna dostępność paska wymaga również testów manualnych: programista lub auditor musi sprawdzić, czy logika focusu spełnia oczekiwania (brak ukrytych pułapek), czy pola personalizacji (jeśli występują) są nawigowalne za pomocą klawiatury, oraz czy pasek nie ukrywa innych krytycznych elementów po wyświetleniu.

Pomyśl także o zarządzaniu: większość CMP (menedżerów zgody dostępnych na rynku) domyślnie ma błędy dostępności. Przed wyborem konkretnego rozwiązania sprawdź jego dokumentację dotyczącą EAA i RODO, przetestuj pasek w środowisku preprodukcyjnym z wykorzystaniem siedmiu powyższych punktów, a jeśli to możliwe, zażądaj poprawek przed wdrożeniem. Inclaria umożliwia zeskanowanie strony w kilka sekund; pasek cookies jest często pierwszym elementem audytu dostępności, klasyfikowanym jako blokujący, ponieważ warunkuje dostęp do reszty treści.

Aktualizacja: testuj pasek co trzy do sześciu miesięcy. Każda zmiana CMP, aktualizacja przeglądarki lub modyfikacja projektu może spowodować nową niezgodność.

Kluczowe punkty do zapamiętania

• Niedostępna belka ciasteczek unieważnia zgodę RODO i narusza EAA.
• Siedem minimalnych sprawdzeń obejmuje: focus, klawiatura, kontrast, nazwy, równość akceptacji/odmowy, pułapki, powiększenie.
• Test ręczny uzupełnia test automatyczny: rzeczywista nawigacja klawiaturowa, logika focusu, spójność zarządzania CMP.
• Zgodna belka ciasteczek jest pierwszym sygnałem ogólnej zgodności Twojej strony.