AI and N8N

Fundament WCAG 2.1

1. Fundament: 4 zasady WCAG 2.1 (POUR)

1️⃣ Perceivable – postrzegalność

Użytkownik musi móc odebrać treść (wzrok, słuch, czytnik).

Co wdrożyć:

  • Teksty alternatywne (alt) do grafik
  • Wystarczający kontrast kolorów
  • Napisy do multimediów
  • Poprawna struktura treści (nagłówki, listy)

Gdzie w WordPressie:

  • Media Library → pola ALT
  • Edytor blokowy (Gutenberg)
  • CSS motywu

Jak:

  • ALT: <img src="..." alt="Panel sterowania Ex – widok frontowy">
  • Kontrast:
    • min. 4.5:1 dla tekstu
    • sprawdzaj: WebAIM Contrast Checker
  • Nagłówki:
    • Jeden H1 na stronę
    • Logiczna hierarchia (H2 → H3, bez skoków)

2️⃣ Operable – funkcjonalność

Strona musi być obsługiwana klawiaturą i nie może „blokować” użytkownika.

Co wdrożyć:

  • Pełna obsługa klawiatury
  • Widoczny focus
  • Brak pułapek klawiaturowych
  • Odpowiedni czas reakcji

Gdzie:

  • Motyw
  • Menu (Gutenberg / własne)
  • JS (slider, popup, modal)

Jak:

  • Focus w CSS: :focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; }
  • Unikaj:
    • outline: none
    • focus „zjadany” przez JS
  • Link „Przejdź do treści”: <a href="#content" class="skip-link">Przejdź do treści</a>

3️⃣ Understandable – zrozumiałość

Użytkownik musi rozumieć, co widzi i co się stanie.

Co wdrożyć:

  • Jasny język
  • Spójna nawigacja
  • Przewidywalne formularze
  • Czytelne błędy

Gdzie:

  • Treści stron
  • Formularze (Contact Form 7, WPForms, Gravity Forms)
  • Komunikaty systemowe

Jak:

  • Label + input: <label for="email">Adres e-mail</label> <input id="email" type="email">
  • Błędy: <span role="alert">Pole wymagane</span>
  • Nie zmieniaj kontekstu bez akcji użytkownika (np. auto-redirect)

4️⃣ Robust – solidność

Strona musi działać z czytnikami ekranu i przyszłymi technologiami.

Co wdrożyć:

  • Semantyczny HTML
  • Poprawne ARIA
  • Brak „div-spaghetti”

Gdzie:

  • Szablony PHP
  • Bloki niestandardowe
  • Menu, modale, accordions

Jak:

  • Semantyka: <nav>, <main>, <header>, <footer>, <button>
  • ARIA (tylko gdy trzeba): <button aria-expanded="false" aria-controls="menu">
  • Nigdy:
    • role="button" na <div> jeśli można użyć <button>

Poziomy zgodności (co realnie robić)

PoziomCo oznacza w praktyce
AMinimum – NIE wystarczy
AASTANDARD – to wdrażaj
AAAZbyt restrykcyjne dla większości

➡ Cel: WCAG 2.1 AA

WordPress – szybkie decyzje techniczne

Motyw

  • ✅ Blokowy (Full Site Editing)
  • ❌ Stare motywy z page builderami (Divi, stare WPBakery)

Wtyczki (pomocnicze, NIE zastąpią wdrożenia)

  • Accessibility Checker
  • WP Accessibility
  • Brak „one-click WCAG” – to mit

Minimalna checklista wdrożeniowa

MUSI BYĆ:

  • ALT dla obrazów
  • Kontrast AA
  • Klawiatura 100%
  • Focus widoczny
  • Semantyczne nagłówki
  • Label w formularzach
  • Brak automatycznych zmian kontekstu
  • Poprawny HTML

Co najczęściej „polega” w WordPressie

  • Menu bez obsługi klawiatury
  • Slider bez pauzy
  • Ikony bez tekstu
  • Linki typu „kliknij tutaj”
  • Modal bez focus trap
  • PDF bez dostępności (częsty błąd!)

Rekomendacja operacyjna

  1. Audyt (Lighthouse + manual)
  2. Motyw / CSS / HTML
  3. JS (interakcje)
  4. Treści
  5. Test z klawiaturą + NVDA