Dyrektywa EAA i nowe wymogi dostępności cyfrowej to must have. Jak uniknąć kar? 12 praktycznych wskazówek.
Dyrektywa EAA (Europejski Akt o Dostępności) nakłada nowe, jasno określone obowiązki na firmy, które chcą działać legalnie i skutecznie na rynku europejskim. W tym artykule rozwiejemy wszystkie Twoje wątpliwości oraz krok po kroku pokazujemy, jak przygotować rozwiązania online do wymogów dostępności cyfrowej.
Czym jest Dyrektywa EAA i kogo dotyczy?
Europejski Akt o Dostępności (EAA) – czyli Dyrektywa 2019/882 – to regulacja, która ma na celu ujednolicenie standardów dostępności produktów i usług cyfrowych w całej Unii Europejskiej. Od 28 czerwca 2025 r. nowe przepisy obejmują zarówno sektor publiczny, jak i – po raz pierwszy – sektor komercyjny: sklepy internetowe, banki, firmy świadczące usługi online, aplikacje mobilne oraz serwisy e-commerce. Wykluczone są jedynie mikroprzedsiębiorstwa (poniżej 10 pracowników i 2 mln euro rocznego obrotu).
Zakres EAA jest bardzo szeroki. Obejmuje m.in.:
- Strony internetowe,
- Aplikacje webowe i mobilne,
- Sklepy internetowe,
- Systemy bankowości elektronicznej,
- E-booki i czytniki,
- Terminale samoobsługowe, takie jak bankomaty czy biletomaty.
Głównym celem dyrektywy jest poprawa jakości życia osób z niepełnosprawnościami oraz otwarcie rynku cyfrowego dla wszystkich użytkowników.
Konsekwencje ignorowania nowych wymogów
Nowe obowiązki to nie tylko „papierowy” wymóg. Brak wdrożenia grozi wysokimi karami finansowymi oraz wykluczeniem z zamówień publicznych, a także utratą zaufania klientów.
Patrząc z drugiej strony…jeśli wdrożysz nowe wymogi dostępności cyfrowej, nie tylko uchronisz swój biznes przed karami. Ale otworzysz się na miliony nowych klientów – również tych z niepełnosprawnościami czy seniorów, a także zbudujesz pozytywny wizerunek marki.
Jak przygotować się na Dyrektywę EAA? Przygotowaliśmy 12 praktycznych wskazówek.
1. Zrób audyt zgodności z Dyrektywą EAA i standardem WCAG 2.2
Rozpocznij od wnikliwej analizy: sprawdź, w jakim stanie jest Twoja strona internetowa, sklep online lub aplikacja. Skorzystaj z narzędzi takich jak Google Lighthouse, WAVE, Axe DevTools oraz przeprowadź testy manualne (np. obsługa serwisu wyłącznie klawiaturą, czy działanie czytników ekranu). Dzięki temu zidentyfikujesz największe bariery dla osób z niepełnosprawnościami czy seniorów.
A jeśli potrzebujesz wsparcia ekspertów, którzy przeprowadzą Cię przez cały proces „od A do Z”…Skontaktuj się z nami przez prosty formularz na stronie. Zapewniamy Ci audyt, wdrożenia i długofalowe wsparcie w zakresie dostępności cyfrowej i wdrożenia standardów dot. “Dyrektywa EAA”.
2. Dostosuj strukturę i wygląd serwisu do standardów WCAG 2.2
Od 28 czerwca 2025 wszystkie nowe i istniejące rozwiązania muszą być zgodne z WCAG 2.2 na poziomie AA. To może brzmieć technicznie, ale w rzeczywistości sprowadza się do kilku kluczowych obszarów, które realnie wpływają na doświadczenie użytkowników. Poniżej znajdziesz szczegółowe omówienie najważniejszych zmian, które musisz wprowadzić.
🔴 Kontrast kolorów tekstu i tła – niech wszystko będzie czytelne
O co chodzi?
Kontrast to różnica w jasności między tekstem a jego tłem. Jeśli jest zbyt niska, osoby słabowidzące, z zaburzeniami postrzegania barw (np. daltonizmem) czy po prostu seniorzy, nie będą w stanie odczytać treści.
✔️ Co musisz zrobić?
- Tekst standardowy: Musi mieć współczynnik kontrastu co najmniej 4.5:1 względem tła.
- Tekst duży: (Powyżej 18 punktów lub 14 punktów przy czcionce pogrubionej) – tutaj wymóg jest łagodniejszy i wynosi 3:1.
- Elementy graficzne i interfejs: Przyciski, ikony czy obramowania pól formularzy również muszą mieć kontrast na poziomie co najmniej 3:1 względem otoczenia, aby były dobrze widoczne.
Jak to sprawdzić?
- Testuj elementy w różnych trybach (np. tryb ciemny/jasny), aby żaden użytkownik nie miał problemów z czytelnością.
- Użyj darmowych narzędzi online, takich jak WebAIM Contrast Checker lub Adobe Color. Wystarczy, że wkleisz kody kolorów tekstu i tła, a narzędzie od razu pokaże Ci, czy spełniasz normy.
🔴 Dodaj opisy alternatywne (alt text) do obrazków – opowiedz, co jest na zdjęciu
O co chodzi?
Osoby niewidome korzystają z czytników ekranu, które odczytują na głos zawartość strony. Kiedy taki czytnik napotka obrazek, odczyta jego tekst alternatywny (tzw. atrybut alt). Bez niego użytkownik nie ma pojęcia, co przedstawia grafika – czy jest to zdjęcie produktu, ważny wykres, czy tylko element dekoracyjny.
✔️ Co musisz zrobić?
- Każdy obrazek, który niesie informację, musi mieć krótki, ale treściwy opis w atrybucie alt. Zastanów się: “jak opisałbym ten obrazek komuś przez telefon?”.
- Przykład: Zamiast alt=”zdjecie123″ napisz alt=”Mężczyzna w garniturze siedzi przy biurku i pracuje na laptopie”.
- Jeśli obrazek jest czysto dekoracyjny i nie wnosi żadnej treści, atrybut alt powinien pozostać pusty (alt=””). Dzięki temu czytniki ekranu go pominą, nie zaśmiecając przekazu.
🔴 Zadbaj o logiczną strukturę nagłówków – stwórz spis treści dla strony
O co chodzi?
Nagłówki (H1, H2, H3 itd.) tworzą hierarchiczną strukturę treści. Dla użytkowników czytników ekranu działają jak spis treści – pozwalają szybko przeskakiwać między sekcjami i zorientować się w architekturze strony. Dla algorytmów Google to z kolei kluczowa informacja o tym, co jest najważniejsze w Twoim artykule.
✔️ Co musisz zrobić?
- Używaj tylko jednego nagłówka H1 na każdej podstronie – to główny tytuł, np. nazwa produktu lub tytuł artykułu.
- Zachowaj hierarchię: Po H1 powinny następować H2 (główne sekcje), a w ich obrębie H3 (podsekcje) itd. Nigdy nie przeskakuj poziomów, np. z H2 do H4.
- Nie używaj nagłówków do stylizowania tekstu. Jeśli chcesz coś pogrubić lub powiększyć, użyj do tego stylów CSS, a nie znaczników nagłówków.
- Listy i tabele: Muszą być oznaczone odpowiednimi znacznikami HTML (<ul>, <table>), aby zapewnić ich zrozumiałość.
🔴 Stwórz zrozumiałe etykiety dla linków, przycisków i formularzy
O co chodzi?
Użytkownicy muszą wiedzieć, co się stanie, zanim klikną. Niejasne komunikaty jak “Kliknij tutaj” lub “Więcej” są bezużyteczne, zwłaszcza gdy czytnik ekranu wyodrębni listę samych linków. To samo dotyczy formularzy – użytkownik musi wiedzieć, jakie dane ma wpisać w każde pole.
✔️ Co musisz zrobić?
- Każdy przycisk powinien mieć czytelny opis działania (np. „Wyślij” zamiast „OK”, „Dodaj do koszyka” zamiast „Więcej”).
- Etykiety formularzy: Każde pole (<input>) musi być połączone ze swoją etykietą (<label>). Dzięki temu kliknięcie w etykietę aktywuje pole, a czytniki ekranu prawidłowo informują, co należy wpisać (np. “Imię, pole edycji”).
- Komunikaty o błędach: Muszą być jasne i precyzyjnie wskazywać, gdzie i dlaczego wystąpił błąd (np. “Pole ‘Adres e-mail’ jest wymagane” zamiast ogólnego “Błąd formularza”).
- Formularze muszą sygnalizować błąd jednoznacznie — np. czerwonym kolorem + opisem/ikoną/komunikatem tekstowym.
🔴 Nawigacja dostępna z klawiatury
O co chodzi?
Nie wszyscy używają myszki. Osoby z niepełnosprawnościami ruchowymi, ale też zaawansowani użytkownicy (tzw. power-userzy), nawigują po stronach wyłącznie za pomocą klawiatury (głównie klawiszem Tab).
✔️ Co musisz zrobić?
- Sprawdź sam: Spróbuj przejść przez całą swoją stronę – od menu, przez przyciski, po formularz kontaktowy – używając tylko klawisza Tab do przechodzenia do przodu, Shift+Tab do cofania się i Enter do aktywacji linków/przycisków.
- Widoczny fokus: Zawsze musi być widać, który element jest aktualnie aktywny. Najczęściej jest to standardowa ramka dodawana przez przeglądarkę. Upewnij się, że Twoi programiści jej nie ukryli (outline: none; w CSS to częsty błąd). Fokus musi być wyraźny i kontrastowy, np. przez podświetlenie.
- Unikaj “pułapek na klawiaturę”: Użytkownik nie może utknąć w żadnym elemencie (np. w okienku pop-up), nie mogąc go opuścić za pomocą klawiatury.
🔴 Poprawność działania dla czytników ekranu
O co chodzi?
Współczesne strony są pełne interaktywnych elementów: rozwijane menu (akordeony), karuzele ze zdjęciami, okna modalne. Jeśli nie są one odpowiednio zakodowane, dla czytnika ekranu są tylko zbiorem przypadkowych elementów.
✔️ Co musisz zrobić?
- Informuj o stanie: Czytnik musi wiedzieć, czy dany element jest rozwinięty czy zwinięty, aktywny czy nieaktywny. Do tego służą atrybuty ARIA (Accessible Rich Internet Applications), np. aria-expanded=”true”.
- Logiczna kolejność odczytu: Treść odczytywana przez czytnik musi mieć taki sam sens, jak treść widziana na ekranie. Upewnij się, że wizualna kolejność elementów odpowiada ich kolejności w kodzie HTML.
- Przetestuj serwis z popularnymi czytnikami ekranu (NVDA, JAWS, VoiceOver), by upewnić się, że czytane są wszystkie ważne treści, komunikaty i opisy (np. przy błędach w formularzu).
- Unikaj tzw. „tego co niewidzialne dla czytników”, jak ukryte linki nawigacyjne, nierozpoznawalne grafiki czy nieopisane przyciski.
🔴 Responsywność i dostępność na urządzeniach mobilnych
O co chodzi?
Coraz więcej użytkowników korzysta z Internetu na urządzeniach mobilnych. Strona czy aplikacja musi być w pełni funkcjonalna na smartfonach i tabletach – także dla osób z różnymi niepełnosprawnościami.
✔️ Co musisz zrobić?
- Stosuj responsywny design: treści i elementy interfejsu dopasowują się do rozmiaru ekranu, niezależnie od urządzenia. Sprawdź, czy serwis poprawnie wyświetla się i obsługuje na smartfonach oraz tabletach.
- Elementy Klikalne (np. przyciski, linki) nie mogą być zbyt małe ani „za blisko siebie” – zalecana minimalna wysokość/wielkość: 44×44 px.
- Wprowadź możliwość nawigacji gestami oraz wsparcie dla funkcji dostępności w systemach Android/iOS (np. VoiceOver, TalkBack).
- Zadbaj, aby komunikaty, menu czy pop-upy były dobrze czytelne i łatwe do zamknięcia.
🔴 Tłumaczenia i wielojęzyczność
O co chodzi?
Każda wersja językowa Twojego serwisu powinna zapewniać identyczną jakość dostępności cyfrowej – to znaczy, że wszystkie funkcje, treści i komunikaty muszą być zarówno zrozumiałe, jak i łatwe do przetłumaczenia.
✔️ Co musisz zrobić?
- Wszystkie napisy, komunikaty o błędach, etykiety oraz instrukcje przetłumacz i dostosuj do lokalnego języka użytkownika.
- Pamiętaj o alternatywnych opisach grafik, o których pisaliśmy w punkcie 2 tego artykułu („alt text”) także w innych wersjach językowych.
- Zadeklaruj język strony przy użyciu atrybutu lang w kodzie HTML (np. <html lang=”pl”> dla wersji polskiej).
🔴 Multimedia – napisy i audiodeskrypcja
O co chodzi?
Filmy, podcasty, webinary i inne materiały multimedialne muszą być dostępne dla osób z niepełnosprawnościami słuchu i wzroku. To oznacza konieczność stosowania napisów (dla niesłyszących i niedosłyszących) oraz audiodeskrypcji (dla niewidomych i niedowidzących).
✔️ Co musisz zrobić?
- Dodaj napisy do wszystkich materiałów wideo. Napisy powinny zawierać nie tylko dialogi, ale także istotne dźwięki z tła (np. “aplaus”, “muzyka dramatyczna”, “szum ulicy”).
- W przypadku transmisji na żywo należy zapewnić napisy na żywo lub udostępnić nagranie z dodanymi napisami możliwie jak najszybciej.
- Zamieść transkrypcję dla materiałów audio i wideo. Transkrypcja to tekstowy zapis wszystkiego, co słychać w materiale. Ułatwia korzystanie z treści osobom, które nie mogą lub nie chcą korzystać z dźwięku (np. w miejscach publicznych).
- Audiodeskrypcja do filmów – to dodatkowy opis lektorski dla osób niewidomych – tłumaczy, co dzieje się na ekranie, opisuje akcję, wyraz twarzy, zmiany scenerii, gesty itd. W praktyce można nagrać własną ścieżkę audio lub dodać alternatywny plik do odtwarzacza (większość nowoczesnych odtwarzaczy internetowych oferuje taką opcję).
- Nie polegaj wyłącznie na automatycznych narzędziach. Automatyczne generowanie napisów (np. przez YouTube) bywa pomocne, ale często zawiera błędy. Zawsze zweryfikuj i popraw wygenerowane napisy.
🔴 Dostępność językowa
O co chodzi?
Dyrektywa EAA nakłada obowiązek publikacji deklaracji dostępności – jasnego dokumentu informującego, w jakim stopniu serwis spełnia wymogi dostępności cyfrowej oraz umożliwia zgłaszanie barier przez użytkowników.
✔️ Co musisz zrobić?
- Przygotuj czytelną deklarację dostępności, aktualizując ją przy każdej istotnej zmianie w serwisie.
- Upewnij się, że strona z deklaracją jest łatwo dostępna z każdej podstrony (np. w stopce).
- Dodaj prosty formularz kontaktowy lub adres e-mail/telefon, który użytkownicy mogą wykorzystać do zgłaszania problemów związanych z dostępnością.
🔴 Szkolenia dla zespołu
O co chodzi?
Dostępność cyfrowa to zadanie zespołowe. Twój zespół techniczny, redaktorzy i designerzy muszą rozumieć zasady dostępności i regularnie je stosować.
✔️ Co musisz zrobić?
- Organizuj szkolenia i warsztaty dla zespołu – można zlecić je zewnętrznym ekspertom, np. Devqube.
- Wprowadź checklisty i procedury do procesu publikacji treści oraz wdrożeń.
- Regularnie audytuj serwis, a zmiany testuj nie tylko automatycznymi narzędziami, ale i manualnie (np. z użyciem klawiatury czy czytnika ekranu).
Pamiętaj: Dyrektywa EAA i dostępność cyfrowa to nie jest rewolucja, tylko eliminowanie barier
Jeśli wdrożysz powyższe usprawnienia – Twoja strona/aplikacja nie tylko spełni wymogi prawne, ale realnie stanie się przyjazna dla wszystkich użytkowników, co przełoży się na lepszą renomę, wyższy zasięg, lojalność oraz… lepsze pozycje w Google.
Nie musisz obawiać się całkowitej przebudowy systemu. Kluczem jest stopniowe wprowadzanie zmian oraz otwartość na konsultacje z ekspertami.
Masz pytania? Nadal masz wrażenie, że coś jest za trudne? Skontaktuj się z Devqube – przeprowadzimy Cię przez cały proces, wyjaśnimy w praktyce, przeprowadzimy audyt i przygotujemy Twój serwis na nowe przepisy… za Ciebie.
Najczęstsze wątpliwości i nasze odpowiedzi:
💡 Czy grożą mi kary za brak zgodności z Dyrektywą EAA?
Tak, za nieuwzględnienie wymogów EAA możesz dostać wysoką karę oraz zostać wykluczony z części rynku.
💡 Czy muszę wszystko wdrażać od razu?
Warto zacząć jak najszybciej i wprowadzać zmiany etapami – im szybciej, tym więcej zyskasz przewagi nad konkurencją.
💡 Co jeśli nie mam wewnętrznych kompetencji, żeby wdrożyć wytyczne EAA?
Skorzystaj z pomocy Devqube – jako doświadczony partner technologczny z przyjemnością wykonamy audyt, zaplanujemy wdrożenie i przeprowadzimy szkolenie Twojego zespołu.
💡Czy muszę o tym informować użytkowników?
Tak – umieszczenie deklaracji dostępności i formularza kontaktowego to obowiązek wg EAA.
