WCAG - co to jest i dlaczego Twoja strona powinna być dostępna

Klient pyta: "Dlaczego moja mama nie może normalnie czytać naszej strony?"

Mama ma 67 lat i słaby wzrok. Powiększa czcionkę w przeglądarce do 150%. Na połowie stron, które odwiedza, tekst nakłada się na siebie, przyciski znikają pod krawędzią, menu przestaje reagować. Strona technicznie działa. Ale dla niej - nie istnieje.

To jest problem dostępności. I dotyczy dużo więcej ludzi, niż myślisz.

Czym jest WCAG

WCAG (Web Content Accessibility Guidelines) to zbiór wytycznych, które mówią jak budować strony dostępne dla wszystkich - w tym dla osób z niepełnosprawnościami wzroku, słuchu, ruchu czy ograniczeniami poznawczymi.

Aktualny standard to WCAG 2.1. Najczęściej stosowany poziom: AA (podwójne A). Są trzy poziomy - A (minimum), AA (standard branżowy), AAA (maksimum). Większość przepisów i przetargów wymaga AA.

Wytyczne opierają się na 4 zasadach. Strona musi być:

Postrzegalna - użytkownik musi widzieć lub słyszeć treść. Alt text na obrazkach, wystarczający kontrast kolorów, napisy w wideo.

Operacyjna - da się z niej korzystać klawiaturą, nie tylko myszką. Widoczny fokus, logiczna nawigacja, brak pułapek (element, z którego nie da się wyjść Tabem).

Zrozumiała - treść i interfejs są czytelne. Zadeklarowany język strony, opisane etykiety w formularzach, zrozumiałe komunikaty błędów.

Rzetelna - strona działa z różnymi technologiami. Screen readery, starsze przeglądarki, urządzenia wspomagające.

Kogo to dotyczy

W Polsce żyje ok. 4,7 mln osób z orzeczoną niepełnosprawnością. Globalnie - 1,3 mld ludzi, 16% populacji. Do tego dochodzą osoby z tymczasowymi ograniczeniami: złamana ręka, zapalenie spojówek, hałas w otoczeniu, jasne słońce padające na ekran telefonu.

I osoby starsze. Twoja grupa docelowa starzeje się razem z Tobą. Wzrok siada, motoryka rąk nie jest taka jak kiedyś, a ekrany telefonów nie rosną.

Ale dostępność pomaga też osobom bez żadnych ograniczeń. Dobry kontrast tekstu jest łatwiejszy do czytania w słońcu. Duże przyciski łatwiej trafić palcem na telefonie. Napisy w wideo ratują, gdy jedziesz tramwajem bez słuchawek.

Prawo w Polsce

Od 2024 roku obowiązuje Ustawa o dostępności cyfrowej. Dotyczy podmiotów publicznych - urzędów, uczelni, szpitali, spółek komunalnych. Za brak dostępności grożą kary finansowe.

Dla firm prywatnych WCAG nie jest jeszcze wymagane prawem. Ale coraz więcej klientów korporacyjnych wymaga tego od swoich dostawców. Przetargi publiczne mają WCAG w specyfikacji. European Accessibility Act, który wchodzi w życie w UE, obejmie też sektor prywatny - e-commerce, bankowość, telekomunikację.

Kierunek jest jednoznaczny: dostępność staje się standardem, nie opcją.

Dlaczego to ma sens biznesowy

Pomijając etykę (bo nie trzeba tłumaczyć, dlaczego ludzie powinni móc korzystać z Twojej strony):

• Większy zasięg - 16% populacji to segment, z którego rezygnujesz, gdy strona jest niedostępna
• Lepsze SEO - Google nagradza dostępne strony. Alt text, poprawna struktura nagłówków, semantyczny HTML - to samo, czego wymaga pozycjonowanie
• Mniej reklamacji - formularz kontaktowy, który działa dla wszystkich, to mniej telefonów "nie mogę wysłać zapytania"
• Wizerunek - firma, która dba o dostępność, jest postrzegana jako profesjonalna. Nie dlatego, że to modne - dlatego, że to uczciwe

Od czego zacząć

Nie musisz przebudowywać strony od zera. Zacznij od czterech rzeczy:

1. Sprawdź kontrast tekstu. Minimum 4.5:1 dla normalnego tekstu, 3:1 dla dużego. Darmowe narzędzie: WebAIM Contrast Checker
2. Dodaj alt text do obrazków. Opisz co jest na zdjęciu, nie wpisuj "zdjęcie" ani "image_01.jpg"
3. Przetestuj stronę klawiaturą. Wciśnij Tab i nawiguj po stronie. Fokus powinien być widoczny i poruszać się logicznie
4. Powiększ tekst do 200%. Ctrl/Cmd + kilka razy. Jeśli coś się rozjeżdża - masz problem

Na dede.agency wdrożyliśmy WCAG 2.1 AA - od kontrastu kolorów, przez nawigację klawiaturą, po widget dostępności, który pozwala zwiększyć kontrast, powiększyć tekst czy zatrzymać animacje. Nie wymagało to przebudowy strony. Wymagało świadomego podejścia do detali, których wcześniej nie widać.

W następnym wpisie pokażę konkretne narzędzia i testy, którymi sprawdzisz dostępność swojej strony w 10 minut.