WCAG 2.1 checklist

1. Tekst i treści

• Minimalny kontrast tekstu: Kontrast między tekstem a tłem powinien wynosić przynajmniej 4.5:1 (dla tekstu normalnego) i 3:1 (dla dużego tekstu).
• Możliwość zmiany rozmiaru tekstu: Użytkownik powinien móc powiększyć tekst do 200% bez utraty funkcjonalności strony.
• Unikaj obrazów zawierających tekst – tekst powinien być prawdziwym tekstem, nie grafiką.

2. Nawigacja i struktura strony

• Spójna nawigacja: Elementy nawigacyjne (np. menu) powinny być uporządkowane w taki sam sposób na każdej stronie.
• Zrozumiałe nagłówki i etykiety: Powinny jasno określać cel (np. nazwy przycisków typu „Zapisz” zamiast „OK”).
• Widoczny focus klawiatury: Gdy użytkownik porusza się po stronie za pomocą klawiatury (np. klawiszem Tab), aktywne elementy powinny być wyraźnie zaznaczone.

3. Dostępność za pomocą klawiatury

• Wszystkie funkcje muszą być dostępne z klawiatury – użytkownik powinien móc poruszać się po stronie bez użycia myszy.
• Pułapki klawiatury: Należy unikać sytuacji, w której użytkownik nie może wyjść z jakiegoś elementu (np. modal, formularz).

4. Formularze i interakcje

• Etykiety pól formularzy: Każde pole powinno mieć przypisaną, widoczną etykietę (np. „Adres e-mail”).
• Obsługa błędów: Błędy formularzy powinny być opisane w sposób zrozumiały i powinny wskazywać, jak je naprawić.
• Informacja o wymaganych polach: Powinno być jasne, które pola formularza są wymagane.

5. Responsywność i orientacja

• Responsywny design: Strona powinna działać dobrze na różnych urządzeniach i rozdzielczościach.
• Brak wymogu określonej orientacji ekranu: Strona powinna działać zarówno w trybie poziomym, jak i pionowym.

6. Multimedia

• Napisy do filmów: Wszystkie nagrania wideo z dźwiękiem muszą mieć napisy.
• Transkrypcje audio: Dla plików dźwiękowych (np. podcasty) należy zapewnić transkrypcję.

7. Funkcje i interakcje

• Widoczne ostrzeżenia przed zmianą kontekstu: Jeśli np. kliknięcie przycisku przenosi użytkownika na inną stronę, powinien on być tego świadomy.
• Ułatwienia dla czytników ekranu: Dodawaj atrybuty aria-label, opisy alternatywne (alt) do obrazów oraz odpowiednią strukturę nagłówków (h1, h2, itd.).

8. Czas i animacje

• Możliwość zatrzymania ruchomych elementów: Jeśli są animacje, karuzele, przesuwające się treści – użytkownik powinien móc je zatrzymać.
• Czas na wykonanie czynności: Użytkownik powinien mieć wystarczająco dużo czasu na wykonanie akcji (np. wypełnienie formularza).

Spełnienie wymagań WCAG 2.1 AA to nie tylko odhaczenie technicznej checklisty. To realna poprawa jakości doświadczenia użytkownika – dla każdego, niezależnie od jego możliwości. To także sposób na zwiększenie zasięgu strony, poprawę SEO, lepszą reputację marki i… święty spokój przy ewentualnych kontrolach.

Zadbaj o to, by Twoja strona nie wykluczała – ani klientów, ani szans biznesowych.

Jeśli potrzebujesz pomocy w audycie dostępności lub wdrożeniu zmian – odezwij się. Doradzimy, co warto poprawić i wdrożymy rozwiązania, które naprawdę działają.