Divi a dostępność WCAG — jak zrobić stronę zgodną z wymaganiami?
Od czerwca 2025 w UE obowiązuje European Accessibility Act, który nakłada wymóg dostępności na wiele biznesów. WCAG 2.1 AA staje się standardem dla stron komercyjnych. W tym przewodniku pokażę, jak stronę Divi dostosować do wymagań dostępności.
1. Kontrast tekstu
Tekst musi mieć kontrast minimum 4.5:1 wobec tła. Szare teksty na białym tle to klasyczny błąd. Sprawdzisz kontrast w narzędziach: WebAIM Contrast Checker, Stark.
2. Atrybuty alt dla obrazów
Każdy informacyjny obraz musi mieć opisowy atrybut alt. Obrazy dekoracyjne — pusty alt=”” (czytniki ekranu je pominą).
3. Struktura nagłówków
Jeden H1 na podstronę, hierarchia H2 → H3 → H4 (bez przeskoków). To pomaga zarówno dostępności, jak i SEO.
4. Klawiatura — pełna nawigacja Tab
Sprawdź, czy całą stronę przejdziesz tylko klawiaturą (Tab, Shift+Tab, Enter, Escape). W Divi sprawdź zwłaszcza menu mobilne, sliders, popupy.
5. Etykiety formularzy
Każde pole formularza musi mieć etykietę (label) — nie tylko placeholder. W Divi w module „Contact Form” pole „Field Title” generuje label.
6. Animacje i autoplay wideo
Daj użytkownikowi opcję wstrzymania animacji. Wideo nie powinno odtwarzać się automatycznie z dźwiękiem.
7. Język strony
W kodzie HTML musi być atrybut lang=”pl” — Divi automatycznie ustawia to na podstawie języka WordPressa.
8. Wtyczka WP Accessibility
Pomocna wtyczka, która naprawia wiele drobnych problemów (skip-links, ARIA labels, fokus visible). Polecam zainstalować na każdej stronie.
9. Testy automatyczne
Przed publikacją przetestuj stronę narzędziami: WAVE (webaim.org/wave), Lighthouse Accessibility w Chrome DevTools, axe DevTools. Naprawiaj zgłaszane problemy.
