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

4.7

(3 opinii)

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.

Kurs UX Design - wprowadzenie do projektowania doświadczeń użytkowników

Zobacz kurs

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

Zobacz kurs

Kurs UX & UI - sztuka użytecznego projektowania

Zobacz kurs

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.