dostępność stron internetowych – WCAG

WCAG – Web Content Accessibility Guidelines — czyli wytyczne dostępności stron internetowych. Czyli jak robić strony internetowe, żeby dało się z nich korzystać każdemu, osobom z niepełnosprawnościami i neuroróżnorodnościami (neurodiversity).

Wytyczne WCAG opierają się na 4 zasadach:

1. Postrzegalność – Perceivable, treść musi być:
   1. czytelna
   2. mieć odpowiedni kontrast
   3. mieć alternatywy (np. alt do obrazków)
2. Funkcjonalność – Operable, strona musi działać:
   1. klawiaturą
   2. bez „pułapek focusa”
   3. bez migających elementów wywołujących ataki
3. Zrozumiałość – Understandable
   1. przewidywalna nawigacja
   2. jasne komunikaty
   3. brak „niespodzianek”
4. Kompatybilność – Robust
   1. poprawny HTML
   2. działa z czytnikami ekranu
   3. zgodna ze standardami

Poziomy WCAG

• A – absolutne minimum
• AA – standard wymagany prawnie (PL, UE)
• AAA – bardzo wysoki poziom (rzadko wymagany)

👉 Dla stron publicznych i komercyjnych wymagane jest WCAG 2.1 AA.

Bonus! 👉 Twoja strona po prostu jest lepsza dla wszystkich użytkowników. I… też dla Google, (SEO bardzo to lubi).

Podstawowa WCAG CHECKLIST WordPress

1. Struktura HTML (fundament)
   1. Używaj semantycznych tagów
      1. header, nav, main, section, article, footer
      2. h1 1× na stronę
   2. Hierarchia nagłówków
      1. nie przeskakuj: h2 → h4
      2. każdy block w Gutenbergu powinien zaczynać się logicznym nagłówkiem
   3. Landmarki
      1. role=”navigation” tylko gdy nie używasz
      2. main tylko jeden na stronę
2. Linki i przyciski (mega ważne)
   1. Link = nawigacja, button = akcja
   2. nie rób buttona z < a >  jeśli nie nawigujesz
   3. Tekst linku musi mieć sens bez kontekstu -> zamiast „Kliknij tutaj” daj „Pobierz raport PDF”
   4. Nie duplikuj linków zamiast: cała karta + button do tego samego URL, daj jeden link, reszta to elementy wizualne
   5. Linki muszą mieć:
      1. :hover,
      2. :focus,
      3. :focus-visible
3. Klawiatura (bez myszy!)
   1. Wszystko musi być obsługiwalne klawiaturą, czyli przez Tab, Enter, Space
   2. Focus widoczny – nie używaj outline: none bez zamiennika
   3. :hover ≠ jedyny stan interakcji, używaj :focus-within, :focus-visible
4. Hover / interakcje
   1. Hover na rodzicu → stylowanie dzieci OK
   2. Brak „pułapek hovera” czyli tooltip / dropdown musi być dostępny klawiaturą
5. Obrazki i media
   1. Każdy img ma:
      1. sensowny alt
      2. lub pusty alt=”” jeśli dekoracyjny
   2. Ikona jako link wtedy -> element < a > aria-label=”Otwórz menu” a svg aria-hidden=”true”
   3. Video: napisy, pauza / stop
6. Kolory i kontrast
   1. 4.5:1 – normalny tekst
   2. 3:1 – duży tekst / UI
   3. Informacja ≠ tylko kolor, czyli kolor czerwony = błąd, tylko ikona + tekst + kolor
7. Formularze (częsty grzech)
   1. Każdy input ma label
   2. Błędy
      1. jasny komunikat tekstowy
      2. aria-describedby
   3. Placeholder ≠ label
8. Gutenberg / ACF Blocks
   1. Blok = samodzielna jednostka
      1. poprawna semantyka
      2. nie łam DOM
   2. ACF
      1. pola true/false → warunkowe klasy OK
      2. nie generuj pustych wrapperów
   3. Dynamic blocks
      1. render_callback → czysty HTML
      2. unikaj div-soup
9. Testy (must-have)
   1. Przejdź stronę samym Tabem
   2. Sprawdź
      1. NVDA / VoiceOver (choć raz)
      2. Lighthouse → Accessibility
      3. kontrast (WCAG Contrast Checker)
   3. Zoom 200% – layout nie może się rozsypać

Najczęstsze błędy (red flags)

• onclick bez klawiatury
• div jako button
• hover-only menu
• brak focusa
• kilka do tego samego URL
• tekst w obrazku

Złota zasada : Jeśli coś da się zrobić myszą — MUSI dać się zrobić klawiaturą.