Dostępność cyfrowa i dobry design nie stoją po przeciwnych stronach. Strona zgodna z WCAG 2.1 może mieć odważną typografię, rozbudowaną identyfikację wizualną oraz animacje GSAP. Musi jednak zachować czytelność, działać bez myszy i respektować ustawienia użytkownika.
Problem zaczyna się wtedy, gdy WCAG traktujemy jak nakładkę instalowaną dzień przed publikacją. Żaden przycisk do zmiany kontrastu nie naprawi źle zbudowanego menu, niewidocznego fokusu, nieopisanych formularzy ani treści niedostępnych dla czytnika ekranu.
W projektach takich jak Gdańsk Nowe Południe, Teatr im. Wojciecha Bogusławskiego w Kaliszu i GAPS dostępność była częścią wdrożenia, a nie poprawką na końcu. Każdy z tych serwisów ma wyrazisty charakter. Każdy rozwiązuje też inny problem: animacje, repertuar i sprzedaż biletów albo interaktywną bazę sztuki z mapą.
W skrócie: WCAG nie zabrania dobrego designu ani animacji. Wymaga, aby informacja i funkcje pozostawały dostępne niezależnie od wzroku, sposobu obsługi, powiększenia ekranu czy preferencji dotyczących ruchu.
Co naprawdę wynika z ustawy, a co jest tylko skrótem?
W Polsce trzeba rozdzielić dwa porządki prawne. Ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej dotyczy stron internetowych i aplikacji mobilnych podmiotów publicznych. Jej załącznik zawiera wymagania odpowiadające zasadniczo WCAG 2.1 na poziomie A i AA.
Od 28 czerwca 2025 r. obowiązuje również Polski Akt o Dostępności. Obejmuje on określone produkty i usługi oferowane przez podmioty gospodarcze, między innymi usługi handlu elektronicznego. Nie oznacza to, że każda prywatna strona podlega identycznym obowiązkom. Zakres zależy od rodzaju organizacji, usługi i przewidzianych w ustawie wyłączeń. Dobre podsumowanie dotyczące e-commerce publikuje Ministerstwo Cyfryzacji.
W żadnej z tych ustaw nie znajdziemy wymogu: „zainstaluj wtyczkę z ikoną osoby z niepełnosprawnością”. Dla serwisów publicznych liczy się spełnienie konkretnych kryteriów z załącznika do ustawy, a nie obecność charakterystycznego panelu w rogu ekranu.
Podstawowe wymagania WCAG 2.1 w praktyce
| Obszar | Co trzeba zapewnić | Co to oznacza dla designu |
|---|---|---|
| Kontrast tekstu | Zwykły tekst powinien mieć kontrast co najmniej 4,5:1, a duży tekst 3:1. | Marka nie musi rezygnować z własnej palety, ale może potrzebować ciemniejszego lub jaśniejszego wariantu koloru. |
| Kontrast interfejsu | Istotne elementy kontrolek, stanów i grafik informacyjnych powinny osiągać co najmniej 3:1 względem sąsiednich kolorów. | Obrys pola, ikona, wykres lub stan aktywny nie mogą znikać na tle. |
| Fokus i klawiatura | Wszystkie funkcje muszą być obsługiwalne klawiaturą, kolejność przejścia logiczna, a fokus widoczny. | Stan :focus-visible jest pełnoprawnym elementem systemu wizualnego, nie techniczną ramką do usunięcia. |
| Typografia i skalowanie | Tekst można powiększyć do 200% bez utraty treści lub funkcji. Przy dużym powiększeniu treść powinna się przeorganizować zamiast wymagać ciągłego przewijania w dwóch kierunkach. | Nie ma ustawowego „jedynego poprawnego” rozmiaru fontu. Potrzebna jest elastyczna typografia, reflow i odporne komponenty. |
| Animacje | Automatyczny ruch trwający ponad pięć sekund i prezentowany obok innych treści wymaga mechanizmu pauzy, zatrzymania lub ukrycia. Nie wolno też przekraczać dopuszczalnego progu błysków. | Ruch może zostać, ale nie może przejmować kontroli nad interfejsem ani utrudniać odczytu. |
| Obrazy | Grafika przekazująca informację potrzebuje adekwatnej alternatywy tekstowej. Element dekoracyjny powinien być ignorowany przez czytnik ekranu. | Opisujemy funkcję i znaczenie obrazu, a nie mechanicznie wszystkie pliki w bibliotece. |
Dokładne kryteria znajdują się w załączniku do ustawy. Warto pamiętać, że zgodność dotyczy całych procesów. Jeśli formularz da się otworzyć klawiaturą, ale nie można nią zamknąć okna, kryterium nadal nie jest spełnione.
Mit: wtyczka WCAG zrobi z niedostępnej strony dostępną
Nie zrobi. Panel do zmiany kontrastu, nasycenia i rozmiaru tekstu może być dodatkowym udogodnieniem. Nie jest jednak dowodem zgodności z ustawą i nie zastępuje dostępnego front-endu.
Ministerstwo Cyfryzacji pisze wprost, że narzędzia do zmiany kolorystyki nie są wymagane prawnie. Podstawowy widok strony powinien sam spełniać wymagania kontrastu. Podobnie nie ma obowiązku dodawania osobnych przycisków „A–” i „A+”. Strona ma po prostu poprawnie działać po powiększeniu jej funkcją przeglądarki lub systemu.
Wtyczka nie naprawi między innymi:
- nieprawidłowej hierarchii nagłówków;
- przycisku zbudowanego z nieinteraktywnego elementu
div; - menu, którego nie da się obsłużyć klawiaturą;
- niewidocznego lub nielogicznie przemieszczającego się fokusu;
- pola formularza bez etykiety i zrozumiałego komunikatu błędu;
- obrazu bez sensownej alternatywy tekstowej;
- automatycznie uruchomionego materiału, którego nie można zatrzymać;
- niedostępnego pliku PDF lub filmu bez napisów.
Dobrym przykładem jest GAPS. Serwis ma własny panel kontrastu, rozmiaru tekstu i animacji, ale jego dostępność nie kończy się na tym pasku. Trzeba było dostosować wyszukiwarkę, mapę, trasy, formularze oraz nawigację klawiaturą. Dodatkowe kontrolki są wygodą, nie fundamentem zgodności.
Animacje GSAP a WCAG: ruch jest dozwolony, utrata kontroli – nie
W projekcie Gdańsk Nowe Południe wdrożyliśmy zaawansowane animacje z użyciem GSAP. Duże liczby, fotografie i charakterystyczne kształty reagują na przewijanie, ale informacja nie zależy wyłącznie od animacji.
Najważniejsza zasada brzmi: animacja ma wzmacniać hierarchię i narrację, a nie decydować o dostępie do treści. Element nie może pozostać niewidoczny tylko dlatego, że skrypt się nie uruchomił. Ruch nie powinien także zmieniać logicznej kolejności DOM ani utrudniać pracy z klawiaturą i czytnikiem ekranu.
prefers-reduced-motion: użytkownik ustawia preferencję na swoim urządzeniu
Systemy Windows, macOS, iOS i Android pozwalają ograniczyć animacje. Strona może odczytać tę preferencję przez zapytanie prefers-reduced-motion. W GSAP można połączyć je z gsap.matchMedia() i nie uruchamiać nieistotnych timeline’ów, parallaxu czy efektownych przejść.
const media = gsap.matchMedia();
media.add("(prefers-reduced-motion: no-preference)", () => {
initGsapAnimations();
});
media.add("(prefers-reduced-motion: reduce)", () => {
showFinalStatesWithoutMotion();
});To rozwiązanie daje kontrolę bez zmuszania użytkownika do szukania osobnego przełącznika na każdej stronie. Można zapewnić także lokalną kontrolkę „Animacje: włącz/wyłącz”, tak jak w GAPS. Oficjalna dokumentacja GSAP opisuje obsługę prefers-reduced-motion, a W3C wskazuje ją jako jedną z technik ograniczania animacji wywoływanych interakcją.
Warto zachować tu precyzję. Obowiązkowe na poziomie A kryterium 2.2.2 dotyczy automatycznie uruchamianych, poruszających się treści spełniających określone warunki. Możliwość wyłączenia nieistotnych animacji wywoływanych interakcją jest w WCAG 2.1 kryterium poziomu AAA. Mimo to respektowanie ustawienia systemowego jest rozsądnym standardem jakości, zwłaszcza przy animacjach zależnych od scrollowania.
Trzy realizacje, trzy różne lekcje dostępnego designu
Gdańsk Nowe Południe: animacja może mieć wariant statyczny
Największym wyzwaniem było pogodzenie wyrazistego projektu z dużą liczbą animowanych elementów. GSAP odpowiada za warstwę ruchu, lecz treść i funkcje pozostają dostępne także bez niej. Użytkownik może ograniczyć animacje przez ustawienia urządzenia, a komponenty mają czytelne stany końcowe.
Drugim elementem było zaplecze redakcyjne. Serwis żyje dzięki aktualnościom i materiałom konsultacyjnym, dlatego dostępność musiała objąć nie tylko szablon, ale też sposób codziennego publikowania.
Teatr Kalisz: dostępność w serwisie, który stale zmienia repertuar
Teatr Kalisz łączy modułowy WordPress, ponad 20 sekcji ACF oraz integrację z systemem biletowym IKSORIS. Po mojej stronie było wdrożenie front-endu i back-endu, integracji oraz rozwiązań WCAG 2.1 AA.
W praktyce oznaczało to między innymi widoczne stany fokusu, obsługę klawiaturą, semantyczną strukturę treści i wsparcie dla alternatyw tekstowych. To szczególnie ważne w serwisie, w którym regularnie pojawiają się nowe plakaty, zdjęcia spektakli i komunikaty repertuarowe.
GAPS: mapa, wyszukiwarka i zewnętrzna weryfikacja
GAPS jest wirtualną kolekcją sztuki w przestrzeni publicznej Gdańska. W serwisie połączone są wyszukiwarka, interaktywna mapa Google, trasy spacerowe i formularz zgłaszania nowych obiektów.
To ważny case study, bo dostępność została sprawdzona poza zespołem wdrożeniowym. Aktualna deklaracja dostępności GAPS podaje, że strona jest zgodna z ustawą i została sprawdzona przez zewnętrzny podmiot – Fundację Integracja. Na stronie zespołu GAPS jestem również wymieniony jako projektant strony internetowej GAPS.
Jednocześnie deklaracja nie zwalnia z dalszej pracy. Każdy nowy obiekt, dokument, zdjęcie lub funkcja może wpłynąć na dostępność serwisu.
Opisy alternatywne: automatyzacja AI z człowiekiem w procesie
Nie każdy obraz powinien mieć opisowy alt. Każdy powinien natomiast zostać świadomie zaklasyfikowany:
- zdjęcie lub grafika przekazująca informację potrzebuje zwięzłego opisu dopasowanego do kontekstu;
- ikona albo obraz będący linkiem powinien opisywać funkcję lub cel, a nie sam wygląd;
- złożony wykres może wymagać dodatkowego, rozszerzonego opisu lub tabeli z danymi;
- obraz czysto dekoracyjny powinien mieć pusty atrybut
alt="", aby czytnik ekranu go pominął.
Takie rozróżnienie opisuje również Ministerstwo Cyfryzacji w wytycznych dotyczących grafik.
W Teatrze Kalisz i Gdańsku Nowe Południe wdrożyłem autorskie narzędzie wspierające redaktorów w tworzeniu opisów alternatywnych. Po dodaniu obrazu tani model AI przygotowuje propozycję opisu. Redaktor widzi wynik w panelu WordPress, może go poprawić, a dopiero potem zatwierdza zapis.
To celowo nie jest automat publikujący opis bez kontroli. Model dobrze rozpoznaje obiekty i sceny, ale nie zna zawsze funkcji obrazu w konkretnej treści. Człowiek decyduje, co w danym kontekście jest ważne, czy grafika jest informacyjna, a może powinna pozostać dekoracyjna.
Takie podejście optymalizuje jednocześnie czas i koszt. Mały model przygotowuje pierwszy szkic, a redaktor poświęca uwagę na ocenę znaczenia, zamiast zaczynać każdy opis od pustego pola.
Kiedy WCAG rzeczywiście ogranicza projekt?
Są sytuacje, w których dobry kompromis oznacza rezygnację z efektu. Uczciwie: nie każdą koncepcję da się zachować jeden do jednego.
Podmienianie naturalnego scrollowania
Nie używamy w projektach WCAG bibliotek, które przejmują natywne przewijanie urządzenia i zastępują je własną animacją. Takie rozwiązanie może zmienić tempo, bezwładność oraz przewidywalność scrollowania, a czasem utrudnić obsługę klawiaturą lub technologiami asystującymi.
GSAP i ScrollTrigger mogą reagować na naturalny scroll bez jego podmieniania. Użytkownik nadal przewija stronę w sposób znany z własnego urządzenia, a animacja jest tylko odpowiedzią wizualną.
Autoplay wideo
Film uruchamiany automatycznie łatwo staje się barierą: odciąga uwagę, generuje ruch i może zasłaniać tekst. Jeśli materiał jest dekoracyjny, bezpieczniejszy bywa statyczny poster albo krótka, wyciszona pętla z kontrolą zatrzymania. Jeśli wideo przekazuje informację, trzeba uwzględnić również napisy, audiodeskrypcję lub właściwą alternatywę.
Tekst na ruchomym tle
Kontrast nie jest stały, gdy pod tekstem przesuwa się film lub jasne fotografie. Półprzezroczysta warstwa nie zawsze wystarczy. Czasami trzeba zatrzymać tło, wydzielić jednolite pole pod tekstem albo przenieść treść poza materiał.
Kolorystyka o zbyt małym kontraście
Pastelowa identyfikacja nadal może działać, ale nie każdy odcień nadaje się do tekstu i kontrolek. Często przygotowuję dodatkowe tokeny kolorystyczne: marka zachowuje swój charakter, a kluczowe treści korzystają z wariantów spełniających wymagane proporcje.
Typografia jako obraz
Zamiana nagłówka w plik SVG lub JPG tylko po to, aby zachować dokładne łamanie, utrudnia skalowanie, tłumaczenie i odczyt przez technologie asystujące. Jeżeli tekst może pozostać prawdziwym tekstem HTML, powinien nim być.
Te kompromisy nie prowadzą do nudnego projektu. Zmuszają jedynie do oddzielenia elementów budujących charakter od tych, które budują barierę.
WCAG nie kończy się w dniu publikacji
Można oddać technicznie dostępną stronę i stracić tę dostępność po kilku tygodniach. Wystarczy nowy plakat bez alternatywy tekstowej, nagłówek użyty tylko dlatego, że ma odpowiedni rozmiar, link „kliknij tutaj” albo niedostępny PDF.
Dlatego wdrożenie powinno obejmować nie tylko kod, ale też proces redakcyjny. W praktyce potrzebne są:
- krótkie szkolenie zespołu publikującego;
- zasady dodawania zdjęć, linków, tabel, filmów i dokumentów;
- CMS, który nie utrudnia tworzenia dostępnych treści;
- ponowne testy po większych zmianach funkcjonalnych;
- wsparcie techniczne i okresowy przegląd kluczowych ścieżek.
Autorski generator opisów alternatywnych jest jednym z takich zabezpieczeń. Nie zastępuje redaktora, ale usuwa tarcie w miejscu, w którym najczęściej powstaje nowa bariera.
FAQ: WCAG 2.1 i projektowanie stron
Czy strona zgodna z WCAG musi być czarno-biała i prosta?
Nie. Wymagany jest odpowiedni kontrast, czytelna struktura oraz dostępność funkcji. Można używać rozbudowanej identyfikacji, fotografii, nietypowej typografii i animacji, jeśli podstawowa treść pozostaje dostępna.
Czy wtyczka do zmiany kontrastu wystarczy do zgodności z WCAG?
Nie. Może być dodatkowym udogodnieniem, ale nie naprawi semantyki HTML, obsługi klawiaturą, fokusu, formularzy, opisów alternatywnych ani multimediów. Ustawa wymaga efektu, a nie konkretnej wtyczki.
Czy WCAG 2.1 pozwala stosować animacje GSAP?
Tak. Animacja nie może powodować niebezpiecznych błysków, blokować dostępu do treści ani odbierać użytkownikowi kontroli. Dobrą praktyką jest respektowanie prefers-reduced-motion i zapewnienie statycznego wariantu interfejsu.
Czy każda firma w Polsce musi mieć stronę zgodną z WCAG?
Nie każda strona podlega tym samym przepisom. Podmioty publiczne obejmuje ustawa o dostępności cyfrowej, a Polski Akt o Dostępności dotyczy określonych produktów i usług świadczonych przez przedsiębiorców, w tym części usług e-commerce. Zakres należy ocenić dla konkretnej organizacji i usługi.
Według ustawy z obowiązku zwolnieni są również mikroprzedsiębiorcy (mnij niż 10 osób i poniżej 2 mln EUR).
Dostępność może być częścią charakteru marki
WCAG nie jest wyrokiem dla designu. Jest testem jakości projektu: czy interfejs nadal działa, gdy użytkownik nie widzi wszystkich elementów, nie używa myszy, powiększa treść albo ogranicza ruch na swoim urządzeniu.
Gdańsk Nowe Południe, Teatr Kalisz i GAPS pokazują trzy różne drogi do tego samego celu. Można połączyć animacje GSAP, rozbudowany CMS, mapę, wyszukiwarkę i mocną identyfikację z realną dostępnością. Trzeba tylko uwzględnić ją przed pierwszą linią kodu i utrzymywać po publikacji.
Jeżeli planujesz nową stronę albo chcesz sprawdzić istniejący serwis, zobacz, jak realizuję strony internetowe zgodne z WCAG. Możesz też opisać swój projekt i umówić konsultację.
Źródła merytoryczne
- Ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej — ELI
- Omówienie wymogów dostępności cyfrowej dla podmiotów publicznych — gov.pl
- Czy wersja kontrastowa strony jest niezbędna? — gov.pl
- Powiększanie tekstu — gov.pl
- Obsługa klawiaturą na stronach internetowych — gov.pl
- Elementy graficzne na stronach internetowych — gov.pl
- WCAG 2.1 — W3C
- Animacje wywoływane interakcją — W3C
gsap.matchMedia()iprefers-reduced-motion— GSAP- Polski Akt o Dostępności — usługi handlu elektronicznego — gov.pl
