Co to jest WCAG? Dostępność cyfrowa w praktyce

WCAG oznacza Web Content Accessibility Guidelines, czyli „wytyczne dotyczące dostępności treści internetowych”. To informacje, które wyjaśniają, w jaki sposób tworzyć content do sieci, przyjazny wszystkim, a w szczególności osobom z niepełnosprawnościami wzroku, słuchu, ruchu, a także zaburzeniami poznawczymi.

Kurs WCAG - dostępność cyfrowa w projektowaniu stron i aplikacji

Naucz się tworzyć strony i aplikacje, z których każdy użytkownik może korzystać bez ograniczeń. Poznaj aktualne zasady WCAG 2.1 i zadbaj o jak najlepszą dostępność Twoich produktów cyfrowych. Dowiedz się więcej

Jak powstało WCAG?

WCAG w wersji 1.0 powstało już w 1999 roku. Dokumentacja jest regularnie aktualizowana, wraz z rozwojem technologii oraz popularyzacją rozwiązań cyfrowych, przenikających do codzienności. Zadaniem WCAG jest konsolidacja najważniejszych wytycznych, których powinni przestrzegać m.in. UX designerzy i web developerzy podczas projektowania i tworzenia stron internetowych oraz aplikacji.

Wraz ze zmianami technologicznymi w 2008 roku opublikowano standard WCAG 2.0. Cztery lata później wytyczne zyskały status międzynarodowej normy ISO/IEC 40500:2012, dlatego zaczęły być coraz częściej przestrzegane przez firmy tworzące cyfrowe rozwiązania dla użytkowników.

Od 2018 roku obowiązuje standard WCAG 2.1. W tej wersji zwrócono szczególną uwagę na wygląd interfejsu oraz interakcje, jakie zachodzą pomiędzy rozwiązaniem cyfrowym a internautą (przede wszystkim dotyk i głos, ze względu na popularność ekranów dotykowych oraz rozwiązań głosowych).

Kompletna dokumentacja WCAG dostępna jest pod tym adresem.

WCAG 2.1 – najważniejsze informacje

Ideą standardu WCAG jest stworzenie prostych, konkretnych i przydatnych instrukcji, które mogą być z łatwością wdrożone na etapie projektowania oraz tworzenia rozwiązania cyfrowego. Wersja 2.1 skupia się na czterech kluczowych aspektach:

1. Postrzegalność

Publikowane treści muszą być dostępne (postrzegalne) dla odbiorców z różnymi niepełnosprawnościami. Dlatego rekomenduje się stosowanie technik takich jak:

• transkrypcja
• opisywanie grafik w sposób alternatywny (dodatkowy tekst)
• wyróżnienia najważniejszych fragmentów treści (bold, kolor)
• responsywność (dostępność dla każdego urządzenia)

2. Funkcjonalność

Aplikacja lub strona internetowa powinna być tak zaprojektowana, aby korzystać z niej np. wyłącznie przy pomocy myszki lub klawiatury. Należy również zadbać o odpowiednie opisanie dostępnych elementów (zarówno głównej zawartości, jak i dodatkowych linków, elementów nawigacji, menu, czy stopki). To pozwala wygodnie korzystać z dostępnych funkcjonalności.

3. Zrozumiałość

Warto używać prostego języka, który będzie zrozumiały dla każdego. Należy unikać niepotrzebnych skrótów oraz akronimów. Wygląd poszczególnych elementów aplikacji lub strony internetowej powinien być spójny i przejrzysty.

4. Kompatybilność

Aplikacja lub strona internetowa powinna prawidłowo otwierać się na każdym typie urządzenia, bez względu na technologię, czy wielkość ekranu. Użytkownicy korzystają z różnych rozwiązań, dlatego tak istotnym elementem WCAG pozostaje kompatybilność.

Dostępność cyfrowa w praktyce – WCAG na stronach internetowych

Stworzenie strony internetowej zgodnej z wytycznymi WCAG pozwoli na wygodne korzystanie z witryny wszystkim użytkownikom. Z tego względu należy pamiętać o tych aspektach:

• Responsywność – to element nawiązujący do kompatybilności oraz postrzegalności. Serwis musi prawidłowo otwierać się na każdym typie urządzenia, od smartfona, poprzez tablet, aż po komputery stacjonarne oraz laptopy.
• Czas ładowania – serwis powinien szybko wczytywać dostępną zawartość.
• Nawigacja i menu – witryna musi posiadać przejrzyste elementy nawigacyjne, w tym menu.
• Linkowanie wewnętrzne – użytkownik powinien z łatwością dostać się do wszystkich podstron przy pomocy linkowania wewnętrznego.

Każdy serwis internetowy wymaga indywidualnej analizy pod kątem WCAG, aby zapewnić użytkownikom maksymalną kompatybilność, zrozumiałość, funkcjonalność oraz postrzegalność. Istnieje jednak szereg wytycznych, które są uniwersalne i znajdują zastosowanie w obrębie praktycznie każdej witryny lub aplikacji:

• Czcionka: powinna być bezszeryfowa o rozmiarze minimum 12 ptk., z zachowaniem interlinii na poziomie 1,15 lub 1,5. Tekst należy dzielić na akapity, gdzie każdy będzie opisywać konkretne zagadnienie. Użytkownicy powinni mieć możliwość powiększenia treści nawet do 200%.


• Kontrast: współczynnik kontrastu (pomiędzy tekstem a tłem) powinien osiągać minimum 4,5:1 dla tekstu pisanego czcionką 18 lub większą. Mniejsze treści mogą być publikowane z kontrastem 3:1.


• Grafiki: fotografie powinny posiadać teksty alternatywne. To opisy, informujące o tym, co dokładnie znajduje się na konkretnej grafice.


• Audio: materiały dźwiękowe powinny posiadać transkrypcje.


• Wideo: materiały wideo nie powinny odtwarzać się automatycznie, ale dopiero po wykonaniu akcji przez użytkownika (np. kliknięcie).


• Wersje językowe: treści warto udostępniać w kilku wersjach językowych, szczególnie jeżeli istnieje szansa na to, że trafią na nie użytkownicy z różnych stron świata.


• Kolory: barwy nie powinny być jednym sygnalizatorem oznaczającym interakcję.

Zachowywanie wymienionych standardów jest zgodne z wytycznymi zamieszczonymi w dokumentacji WCAG 2.1 i sprawia, że strona lub aplikacja są znacznie bardziej przystępne dla użytkowników.