Projektowanie nowoczesnych serwisów internetowych dawno przestało opierać się wyłącznie na estetyce i szybkości działania. Obecnie jednym z najważniejszych fundamentów budowy witryn jest dostępność cyfrowa strony (WCAG), która pozwala osobom z różnymi ograniczeniami – wzrokowymi, słuchowymi, ruchowymi czy poznawczymi – na swobodne korzystanie z zasobów sieci. Jako praktycy z Serwis IT obserwujemy, że temat ten często budzi niepokój u właścicieli firm, bo kojarzy się z rygorystycznymi przepisami i skomplikowaną technologią. W rzeczywistości to po prostu dbałość o to, by internet był miejscem bez barier.
Wdrożenie standardów WCAG, czyli Web Content Accessibility Guidelines, to nie tylko kwestia etyki czy empatii wobec użytkownika. To realne korzyści biznesowe i techniczne. Strona dostępna to strona lepiej zoptymalizowana pod kątem wyszukiwarek, ponieważ roboty Google „widzą” sieć w sposób zbliżony do czytników ekranowych używanych przez osoby niewidome. Ale to również bezpieczeństwo prawne, zwłaszcza w obliczu nadchodzących zmian w polskim i europejskim ustawodawstwie, które rozszerzają krąg podmiotów zobowiązanych do zapewnienia dostępności.
W tym materiale przeanalizujemy, co dokładnie musi spełnić witryna, aby mogła zostać uznana za dostępną. Skupimy się na konkretnych wytycznych technicznych, takich jak kontrast, teksty alternatywne, nawigacja klawiaturą oraz formularze. Pokażemy, jak przygotować się do audytu i jakie koszty mogą wiązać się z dostosowaniem istniejącego już serwisu do standardu WCAG 2.1 lub nowszego.
Kogo obejmuje obowiązek zapewnienia dostępności cyfrowej
Przez lata wymogi dotyczące dostępności kojarzyły się głównie z sektorem publicznym. I słusznie, ponieważ Ustawa o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych nakłada ten obowiązek na urzędy, szkoły, szpitale czy służby mundurowe. Jednak rynek dynamicznie się zmienia. Europejski Akt o Dostępności (EAA) sprawia, że w najbliższym czasie wymogi te obejmą również szeroki sektor prywatny, w tym e-commerce, usługi bankowe, transportowe czy media elektroniczne.
W naszej codziennej pracy widzimy, że coraz więcej firm komercyjnych decyduje się na wdrożenie WCAG dobrowolnie. Bo to się po prostu opłaca. Grupa osób z niepełnosprawnościami oraz seniorów, którzy potrzebują większych czcionek i czytelnego układu, to potężna grupa konsumentów. Jeśli strona sklepu uniemożliwia im dokonanie zakupu za pomocą samej klawiatury, firma traci realny przychód. I to nie jest mały odsetek rynku.
Poniżej przedstawiamy zestawienie podmiotów, dla których dostępność cyfrowa strony (WCAG) jest lub wkrótce będzie obligatoryjna:
| Typ podmiotu | Zakres obowiązków | Termin wdrożenia |
|---|---|---|
| Jednostki sektora finansów publicznych | Pełna zgodność z WCAG 2.1 (poziom AA) | Obowiązuje obecnie |
| Banki i instytucje kredytowe | Dostępność usług i serwisów transakcyjnych | Czerwiec 2025 |
| Sklepy internetowe (duże i średnie) | Dostępność ścieżki zakupowej i płatności | Czerwiec 2025 |
| Firmy transportowe (autobusy, pociągi) | Systemy biletowe i informacyjne | Czerwiec 2025 |
Kontrast i warstwa wizualna według standardów WCAG
Podstawowym problemem, z jakim mierzą się użytkownicy niedowidzący, jest zbyt mała różnica między kolorem tekstu a tłem. Wytyczne WCAG na poziomie AA wymagają, aby współczynnik kontrastu dla tekstu podstawowego wynosił co najmniej 4.5:1. Dla dużych tekstów (powyżej 18pt lub 14pt pogrubionych) dopuszczalny jest niższy współczynnik – 3:1. Ale to dopiero początek drogi do czytelności.
Podczas projektowania grafiki często spotykamy się z chęcią użycia jasnoszarych fontów na białym tle, bo wyglądają „nowocześnie”. Z punktu widzenia dostępności to błąd. Musimy dbać nie tylko o kolor, ale i o czytelność fontów. Unikamy czcionek szeryfowych o bardzo cienkich liniach w treściach artykułów. I pamiętamy, że kolor nie może być jedynym nośnikiem informacji. Jeśli w formularzu błąd zaznaczony jest tylko czerwoną obwódką, osoba nieodróżniająca barw może go nie zauważyć. Musimy dodać ikonę lub tekstowy opis błędu.
- Minimalny kontrast treści: 4.5:1.
- Kontrast elementów interfejsu (ikony, obramowania pól): 3:1.
- Możliwość powiększenia tekstu do 200% bez utraty funkcjonalności.
- Brak polegania wyłącznie na kolorze w przekazywaniu komunikatów.
Teksty alternatywne i multimedia
Dla osoby niewidomej grafika bez opisu nie istnieje. Czytnik ekranu po prostu ją pominie lub odczyta nazwę pliku, która często brzmi jak „DSC001.jpg”. To fatalne doświadczenie. Poprawna dostępność cyfrowa strony (WCAG) wymaga stosowania atrybutów alt, które w zwięzły sposób opisują, co znajduje się na zdjęciu. Jeśli obrazek pełni funkcję czysto dekoracyjną, atrybut alt powinien być pusty (alt=""), aby czytnik wiedział, że ma go zignorować.
W przypadku wideo sprawa jest nieco trudniejsza. Każdy film publikowany na stronie powinien posiadać napisy dla osób niesłyszących. I nie mówimy tu o automatycznych napisach z popularnych serwisów wideo, które często generują błędy, ale o przygotowanych ścieżkach tekstowych. Dodatkowo, jeśli film zawiera istotne informacje wizualne, których nie słychać w dialogach, niezbędna jest audiodeskrypcja lub alternatywa tekstowa pod filmem.
Często spotykam się z opinią, że wdrożenie WCAG psuje design strony, ale to mit – dostępność to po prostu lepsza architektura informacji, która służy każdemu z nas, gdy np. korzystamy z telefonu w pełnym słońcu. Tomasz, administrator serwisu Serwis IT, od 2012 roku projektuje strony i prowadzi kampanie SEO dla firm
Nawigacja klawiaturą i focus
Czy próbowali Państwo kiedyś poruszać się po swojej stronie używając wyłącznie klawisza Tab? To jeden z najprostszych testów dostępności. Użytkownicy z niepełnosprawnościami ruchowymi często nie korzystają z myszki. Muszą mieć możliwość dotarcia do każdego linku, przycisku i pola formularza za pomocą klawiatury. I tutaj pojawia się kwestia tzw. focusu. To ta ramka, która pokazuje, gdzie obecnie się znajdujemy.
Częstym błędem programistycznym jest usuwanie obramowania focusu w CSS (outline: none) bez dodania własnego stylu. W efekcie użytkownik klawiaturowy jest „ślepy” – nie wie, w co kliknie po naciśnięciu Enter. Kolejnym aspektem jest kolejność tabulacji. Powinna być ona logiczna i zgodna z tym, co widzimy na ekranie, czyli zazwyczaj od lewej do prawej i od góry do dołu. Jeśli w kodzie HTML elementy są poukładane chaotycznie, a ich pozycja na ekranie wynika tylko ze stylów CSS, nawigacja klawiaturą stanie się udręką.
Skip linki – ułatwienie dla użytkownika
Długie menu z kilkunastoma pozycjami to zmora dla kogoś, kto musi je „przeklikać” tabulatorem przy każdym przeładowaniu podstrony. Rozwiązaniem są skip linki. To ukryte odnośniki, które pojawiają się jako pierwsze po naciśnięciu Tab i pozwalają przeskoczyć bezpośrednio do głównej treści serwisu. To proste wdrożenie, które diametralnie poprawia komfort użytkowania.
Dostępne formularze i interakcje
Formularze to miejsca, gdzie najczęściej dochodzi do konwersji, ale i do największych frustracji. Dostępny formularz musi mieć poprawnie powiązane etykiety (label) z polami (input). Dzięki temu kliknięcie w tekst etykiety aktywuje pole, a czytnik ekranu wie, co użytkownik ma wpisać. I nie, placeholder (tekst wewnątrz pola) nie zastępuje etykiety, bo znika po rozpoczęciu pisania, co utrudnia orientację osobom z zaburzeniami pamięci.
Ważne jest też informowanie o błędach w czasie rzeczywistym. Jeśli użytkownik pominie wymagane pole, komunikat powinien być jasny i technicznie powiązany z danym elementem (np. za pomocą atrybutu aria-describedby). Bo użytkownik musi wiedzieć nie tylko, że „coś jest nie tak”, ale dokładnie co i gdzie ma poprawić.
Najczęstsze błędy w formularzach
- Brak widocznych etykiet pól (poleganie tylko na placeholderach).
- Brak informacji o wymaganym formacie danych (np. daty).
- Zbyt krótki czas na wypełnienie formularza bez możliwości jego przedłużenia.
- Pułapki klawiaturowe, gdzie użytkownik „wpada” w pole i nie może z niego wyjść za pomocą Tab.
Jak przygotować stronę i ile to kosztuje
Dostosowanie serwisu do wymogów WCAG to proces wieloetapowy. Jeśli budujemy stronę od zera, koszt implementacji dostępności jest stosunkowo niski, zazwyczaj zwiększa budżet o około 15–25%. Znacznie drożej wychodzi naprawianie istniejącego, starego serwisu, gdzie kod może wymagać niemal całkowitego przepisania. U nas w Serwis IT zawsze zalecamy rozpoczęcie od audytu zerowego, który pokaże skalę problemów.
Orientacyjne ceny netto za usługi związane z dostępnością w Polsce:
- Audyt dostępności prostej strony firmowej: 2 500 – 5 000 zł.
- Audyt rozbudowanego portalu lub sklepu: od 7 000 zł w górę.
- Przygotowanie deklaracji dostępności: 500 – 1 200 zł.
- Wdrożenie poprawek technicznych: rozliczane godzinowo, zazwyczaj 150 – 250 zł za roboczogodzinę programisty.
Warto pamiętać, że dostępność to nie jest jednorazowe zadanie. Każda nowa treść, każdy dodany artykuł czy nowa funkcjonalność w panelu klienta muszą być sprawdzane pod kątem WCAG. Dlatego tak ważne jest przeszkolenie redaktorów stron, aby potrafili poprawnie dodawać nagłówki (zachowując ich hierarchię H1-H6) czy opisywać zdjęcia. Bo nawet najlepiej zakodowana strona straci swoją dostępność, jeśli administrator wrzuci na nią skan dokumentu w formacie PDF bez warstwy tekstowej.
Narzędzia wspomagające wdrażanie WCAG
W procesie sprawdzania, czy dostępność cyfrowa strony (WCAG) jest zachowana, korzystamy z szeregu narzędzi. Można je podzielić na automatyczne skanery oraz testy manualne. Skanery automatyczne są świetne na start – potrafią w kilka sekund wyłapać brakujące alty, błędy w strukturze nagłówków czy zbyt niski kontrast. Jednak żadne narzędzie nie zastąpi człowieka. Skaner nie powie nam, czy opis alternatywny zdjęcia ma sens, ani czy nawigacja klawiaturą jest intuicyjna.
Warto korzystać z rozszerzeń do przeglądarek dedykowanych dla deweloperów, które symulują różne wady wzroku lub sprawdzają poprawność kodu pod kątem standardów ARIA (Accessible Rich Internet Applications). Niezbędne jest także przetestowanie strony darmowymi czytnikami ekranu, aby usłyszeć, jak naszą treść odbierają osoby niewidome. To często najbardziej otwierające oczy doświadczenie dla właściciela biznesu.
Najczęstsze pytania
Czy każda firma musi mieć stronę zgodną z WCAG?
Obecnie obowiązek dotyczy głównie podmiotów publicznych. Jednak od czerwca 2025 roku, zgodnie z Europejskim Aktem o Dostępności, wiele firm prywatnych (szczególnie z branży e-commerce i usług cyfrowych) będzie musiało spełnić te wymogi. Warto zacząć przygotowania już teraz, by uniknąć kar i odpływu klientów.
Czy dostępność cyfrowa pomaga w SEO?
Tak, istnieje silna korelacja między dostępnością a pozycjonowaniem. Poprawna struktura nagłówków, teksty alternatywne dla obrazów oraz czysty, semantyczny kod HTML to czynniki, które roboty wyszukiwarek oceniają bardzo pozytywnie. Dostępna strona jest łatwiejsza do zaindeksowania i lepiej rozumiana przez algorytmy.
Co grozi za brak dostępności strony publicznej?
W Polsce organem nadzorczym jest Ministerstwo Cyfryzacji. Za uporczywe łamanie zasad dostępności lub brak deklaracji dostępności na podmioty publiczne mogą zostać nałożone kary pieniężne. Jednak największą „karą” dla biznesu jest utrata wizerunku i wykluczenie znacznej grupy potencjalnych odbiorców.
Czy nakładki (overlaye) dostępności rozwiązują problem?
Z naszego doświadczenia wynika, że automatyczne nakładki – te małe ikony ludzika w rogu strony – często nie rozwiązują problemów u źródła, a czasem wręcz przeszkadzają użytkownikom korzystającym z własnego specjalistycznego oprogramowania. Prawdziwa dostępność powinna być zaszyta w kodzie strony, a nie dodawana jako zewnętrzny skrypt.
