W czerwcu 2025 roku wszedł w życie Europejski Akt o Dostępności. Oznacza to, że strony internetowe muszą być zgodne z jednolitym standardem. Aby Twoja witryna była bezpieczna prawnie i przyjazna dla użytkownika, musi spełniać kryteria z wersji 2.1 oraz nowe wymogi wersji 2.2.

Poniżej znajdziesz kompletne zestawienie wszystkich kryteriów sukcesu dla poziomu AA.

1. Postrzegalność (To, co użytkownik widzi i słyszy)

Informacje muszą być przedstawione tak, aby każdy mógł je odebrać – niezależnie od tego, czy widzi, czy tylko słyszy.

Tekst i Grafika

• Tekst alternatywny: Każde zdjęcie, ikona czy wykres musi mieć krótki opis tekstowy (w kodzie strony), który wyjaśnia, co znajduje się na grafice. Elementy ozdobne muszą być pomijane przez czytniki.
• Multimedia (Wideo i Audio):
  • Filmy muszą mieć napisy rozszerzone (dla niesłyszących).
  • Filmy muszą posiadać audiodeskrypcję (dodatkową ścieżkę lektora opisującą akcję) lub pełną transkrypcję tekstową.
• Struktura treści: Nagłówki, listy i tabele muszą być poprawnie oznaczone w kodzie, a nie tylko wizualnie.

Wygląd i Czytelność

• Sensowna kolejność: Treść w kodzie HTML musi być ułożona w takiej samej logicznej kolejności, w jakiej jest wyświetlana na ekranie (kluczowe dla czytników ekranu).
• Nie polegaj tylko na zmysłach: Instrukcje nie mogą brzmieć „kliknij zielony przycisk” lub „menu po prawej” (osoba niewidoma lub daltonista tego nie zrozumie).
• Orientacja ekranu: Strona nie może blokować możliwości obracania ekranu (musi działać w pionie i w poziomie).

Kolory i Kontrast

• Użycie koloru: Kolor nie może być jedyną informacją (np. błąd oznaczony tylko czerwoną ramką – wymagana jest też ikona lub tekst).
• Kontrast tekstu:
  • Zwykły tekst: stosunek kontrastu do tła minimum 4,5:1.
  • Duży tekst i nagłówki: minimum 3:1.
• Kontrast elementów graficznych: Ikony, przyciski i pola formularzy muszą mieć kontrast minimum 3:1.

Skalowanie

• Powiększanie tekstu: Strona musi być czytelna po powiększeniu tekstu do 200%.
• Responsywność (RWD): Przy szerokości ekranu 320 pikseli nie może pojawiać się dolny pasek przewijania (poziomy scroll).
• Odstępy w tekście: Użytkownik musi mieć możliwość zmiany interlinii i odstępów między akapitami bez “rozsypania się” układu strony.

2. Funkcjonalność (To, jak użytkownik obsługuje stronę)

Nawigacja i elementy interaktywne muszą być dostępne dla każdego, także dla osób nieużywających myszki.

Klawiatura

• Obsługa klawiaturą: Każdą rzecz, którą da się zrobić myszką, trzeba móc zrobić samą klawiaturą.
• Brak pułapek: Kursor nie może utknąć w żadnym elemencie (np. mapie, oknie pop-up) bez możliwości wyjścia.
• Skróty klawiszowe: Jeśli strona ma własne skróty (np. jednoliterowe), użytkownik musi móc je wyłączyć lub zmienić.

Czas i Migotanie

• Kontrola czasu: Jeśli na stronie jest limit czasu (np. na wypełnienie formularza), użytkownik musi mieć opcję jego wydłużenia.
• Pauza i zatrzymanie: Wszystko, co się rusza, miga lub przewija automatycznie (np. karuzele zdjęć), musi dać się zatrzymać.
• Brak drgawek: Treść nie może błyskać częściej niż 3 razy na sekundę (ochrona przed atakami padaczki).

Nawigacja i Fokus

• Tytuły stron: Każda podstrona musi mieć unikalny tytuł w pasku przeglądarki.
• Sensowne linki: Treść linku musi jasno mówić, dokąd on prowadzi (unikaj samego „kliknij tutaj”).
• Widoczny fokus: Musi być wyraźnie widać (np. obramowaniem), który element jest aktualnie wybrany klawiaturą.
• Nieprzysłonięty fokus: Element wybrany klawiaturą nie może być zasłonięty przez inne obiekty (np. przez przyklejony nagłówek czy dymek czatu).

Obsługa dotykiem i gestami

• Gesty: Nie można wymagać skomplikowanych gestów (np. szczypanie, rysowanie ścieżki), chyba że jest dostępna prosta alternatywa (np. przyciski plus/minus).
• Anulowanie kliknięcia: Akcja powinna wykonywać się po puszczeniu przycisku/palca, a nie po jego naciśnięciu.
• Wybudzanie ruchem: Jeśli funkcja działa na potrząśnięcie telefonem, musi być też dostępna przyciskiem.
• Ruchy przeciągania: Jeśli element wymaga przeciągania (np. suwak), musi istnieć alternatywa pozwalająca na jego obsługę pojedynczymi kliknięciami.
• Wielkość celu dotykowego: Przyciski i linki muszą mieć wymiary co najmniej 24×24 piksele lub posiadać odpowiedni odstęp od innych elementów, by łatwo było w nie trafić palcem.

3. Zrozumiałość (To, czy treść jest jasna)

Język musi być prosty, a działanie strony przewidywalne.

Język

• Język strony: W kodzie musi być określony język (np. polski), aby programy czytające użyły dobrego lektora.

Przewidywalność

• Bez niespodzianek: Strona nie może się przeładować ani zmienić układu tylko po tym, jak użytkownik najedzie na jakiś element lub wybierze opcję z listy rozwijanej (chyba że został o tym ostrzeżony).
• Spójna nawigacja: Menu główne powinno być w tym samym miejscu na każdej podstronie.
• Spójne ikony: Te same funkcje (np. „Szukaj”, „Koszyk”) muszą być oznaczone tak samo w całym serwisie.
• Spójna pomoc: Jeśli na stronie dostępna jest pomoc (np. czat, dane kontaktowe, FAQ), musi ona znajdować się w tym samym miejscu na każdej podstronie.

Pomoc przy wprowadzaniu danych (Formularze)

• Etykiety: Każde pole formularza musi mieć jasny opis (etykietę).
• Opis błędów: Jeśli użytkownik popełni błąd, system musi opisać go tekstem (a nie tylko kolorem) i wskazać, gdzie wystąpił.
• Zapobieganie błędom: Przy ważnych transakcjach (finanse, dane prawne) użytkownik musi móc sprawdzić i potwierdzić dane przed wysłaniem.
• Unikanie wielokrotnego wpisywania: Jeśli użytkownik raz podał dane (np. adres), nie powinien być zmuszany do wpisywania ich ponownie w tym samym procesie.
• Dostępne uwierzytelnianie: Logowanie nie może wymagać rozwiązywania zadań pamięciowych (np. przepisywania kodów, rozwiązywania puzzli) bez alternatywy takiej jak wklejanie hasła czy logowanie linkiem e-mail.

4. Solidność (Jakość kodu)

Kod strony musi być zgodny ze standardami, aby działał na różnych urządzeniach i w różnych programach asystujących.

• Poprawność kodu: HTML nie może zawierać błędów składniowych (np. zduplikowanych identyfikatorów ID), które mylą czytniki ekranu.
• Nazwa, Rola, Wartość: Elementy niestandardowe (tworzone przez programistów, np. własne przyciski) muszą przekazywać technologii asystującej informację o tym czym są, jak się nazywają i w jakim są stanie (np. „rozwinięty/zwinięty”).
• Komunikaty o statusie: Ważne komunikaty pojawiające się na ekranie bez przeładowania strony (np. „Dodano do koszyka”) muszą być automatycznie odczytywane przez czytniki ekranu.

Podsumowanie 

Powyższa lista to Twój drogowskaz do zgodności prawnej. Spełnienie tych wymogów gwarantuje, że Twoja strona osiągnie standard WCAG 2.2 na poziomie AA. Warto potraktować to nie jako przykry obowiązek, ale jako sposób na dotarcie do szerszego grona klientów.