Divi a dostępność WCAG — jak zrobić stronę zgodną z wymaganiami
Dostępność cyfrowa przestała być wyłącznie dobrą praktyką, a stała się wymogiem dla wielu firm działających na rynku europejskim. Standard WCAG 2.1 na poziomie AA jest dziś punktem odniesienia dla stron komercyjnych, a jego spełnienie poprawia komfort korzystania z witryny dla wszystkich użytkowników. W tym przewodniku pokazujemy, jak krok po kroku dostosować stronę zbudowaną w Divi do wymagań dostępności.
Kontrast tekstu
Tekst powinien mieć kontrast wynoszący co najmniej 4,5:1 względem tła. Jasnoszary tekst na białym tle to jeden z najczęstszych błędów, który wygląda subtelnie, lecz realnie utrudnia czytanie wielu osobom. Kontrast łatwo zweryfikujesz dedykowanymi narzędziami online, a w Divi wystarczy skorygować kolory w ustawieniach modułów tekstowych.
Atrybuty alt dla obrazów
Każdy obraz niosący informację musi mieć opisowy atrybut alt, dzięki któremu czytniki ekranu przekażą jego treść osobom niewidomym. Obrazy czysto dekoracyjne powinny mieć natomiast pusty atrybut alt, by czytniki mogły je pominąć i nie zaśmiecać odbioru strony zbędnymi opisami.
Struktura nagłówków
Zachowaj jeden nagłówek H1 na podstronę i logiczną hierarchię kolejnych poziomów, bez przeskakiwania z H2 bezpośrednio do H4. Uporządkowana struktura nagłówków pomaga jednocześnie dostępności i pozycjonowaniu, bo zarówno czytniki ekranu, jak i wyszukiwarki łatwiej rozumieją układ treści.
Pełna nawigacja klawiaturą
Sprawdź, czy całą stronę da się obsłużyć wyłącznie klawiaturą, używając klawiszy Tab, Shift+Tab, Enter oraz Escape. W Divi szczególną uwagę zwróć na menu mobilne, suwaki i okna popup, bo to one najczęściej sprawiają problemy z dostępnością. Widoczny wskaźnik fokusu jest tu obowiązkowy.
Etykiety formularzy
Każde pole formularza powinno mieć właściwą etykietę, a nie jedynie tekst zastępczy w postaci placeholdera, który znika po rozpoczęciu pisania. W module formularza kontaktowego w Divi etykietę generuje pole tytułu, dzięki czemu pola pozostają zrozumiałe również dla użytkowników korzystających z technologii asystujących.
Animacje i automatyczne odtwarzanie wideo
Daj użytkownikowi możliwość zatrzymania ruchomych elementów, ponieważ animacje mogą przeszkadzać, a u części osób wywoływać dolegliwości. Wideo nie powinno uruchamiać się automatycznie z dźwiękiem, bo bywa to zaskakujące i utrudnia korzystanie ze strony, zwłaszcza osobom poruszającym się po niej za pomocą czytnika ekranu.
Język strony
W kodzie HTML musi znaleźć się atrybut określający język strony, na przykład polski, co pozwala czytnikom ekranu poprawnie odczytywać treść z właściwą wymową. Divi ustawia tę wartość automatycznie na podstawie języka WordPressa, więc zwykle nie wymaga to dodatkowej konfiguracji.
Wtyczki i testy dostępności
Wiele drobnych problemów, takich jak linki pomijające nawigację, etykiety ARIA czy widoczny fokus, można usprawnić dedykowaną wtyczką do dostępności. Przed publikacją przetestuj stronę automatycznymi narzędziami do audytu dostępności i kolejno naprawiaj zgłaszane uwagi. Pamiętaj jednak, że narzędzia automatyczne wykrywają tylko część problemów i nie zastąpią testu z realnym użytkownikiem klawiatury i czytnika ekranu.
FAQ — najczęstsze pytania
Czy sama wtyczka wystarczy, by strona Divi była zgodna z WCAG?
Nie. Wtyczka do dostępności potrafi naprawić część drobnych problemów, takich jak linki pomijające nawigację czy etykiety ARIA, ale nie zastąpi poprawnej struktury nagłówków, odpowiedniego kontrastu, opisów alt i obsługi klawiaturą. Dostępność trzeba zaprojektować w samej treści i układzie strony.
Jaki kontrast tekstu jest wymagany w WCAG 2.1 AA?
Dla zwykłego tekstu wymagany jest kontrast co najmniej 4,5:1 względem tła, a dla dużego tekstu dopuszczalny jest niższy próg. Najprościej sprawdzić to narzędziem do mierzenia kontrastu i w razie potrzeby przyciemnić kolor tekstu lub rozjaśnić tło w ustawieniach modułu w Divi.
Czy dostępność wpływa na SEO?
Tak, pośrednio. Uporządkowana hierarchia nagłówków, opisy alt obrazów i czytelna struktura pomagają wyszukiwarkom rozumieć treść, a lepszy komfort korzystania obniża współczynnik odrzuceń. Dostępność i SEO w dużej mierze opierają się na tych samych dobrych praktykach.
Jak przetestować dostępność strony zbudowanej w Divi?
Zacznij od testu nawigacji wyłącznie klawiaturą, sprawdzając menu, suwaki i popupy. Następnie uruchom automatyczne narzędzia do audytu dostępności i napraw zgłoszone problemy. Na koniec warto przejść stronę z włączonym czytnikiem ekranu, bo to ujawnia bariery, których narzędzia automatyczne nie wychwytują.
Pobierz Divi -10% →