WCAG 2.1 w skrócie
WCAG to skrótowiec od Web Content Accessibility Guidelines, czyli wytycznych dotyczących dostępności treści internetowych.
Wytyczne WCAG wyjaśniają, jak tworzyć strony internetowe i aplikacje, aby udostępnić je osobom z niepełnosprawnościami np. wzroku, słuchu, ruchu, ale też z niepełnosprawnością intelektualną czy zaburzeniami poznawczymi.
Strony internetowe i aplikacje mobilne, które spełniają wytyczne WCAG, nazywamy dostępnymi cyfrowo.
Wymagania dostępności cyfrowej dla podmiotów publicznych
Wszystkie strony internetowe i aplikacje mobilne podmiotów publicznych muszą być dostępne cyfrowo. Wynika to z Ustawy z 4 kwietnia 2019r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych.
Szczegóły znajdziesz w omówieniu tych wymogów dla podmiotów publicznych.
Struktura WCAG 2.1
WCAG 2.1 opiera się na 4 zasadach:
- postrzegalność;
- funkcjonalność;
- zrozumiałość;
- solidność (w polskim i unijnym prawie określana jako kompatybilność).
Wbrew pozorom zasady te nie są techniczne, a raczej zmuszające do myślenia o różnych użytkownikach, którzy np.:
- chcą wiedzieć, co jest na zdjęciu choć nie widzą;
- nie mogą korzystać z myszy, a jedynie z klawiatury;
- powiększają sobie widok stron lub zmienią jej kolory, żeby móc lepiej widzieć treści;
- zmieniają ustawienia przeglądarki, aby treść była bardziej czytelna.
Zasady te dotyczą wszystkich elementów strony i aplikacji — kodu, treści i sposobu ich działania. Żeby je wdrożyć, muszą zaangażować się wszystkie osoby odpowiedzialne za te obszary na stronie lub w aplikacji.
Zasady WCAG 2.1 są podzielone na 13 wytycznych. Każdy wytyczna jest z kolei podzielona na określone wymagania (kryteria sukcesu”).
Zasada 1: postrzegalność
Spraw, by użytkownicy mogli korzystać ze strony internetowej lub aplikacji za pomocą dostępnych dla nich zmysłów.
Możesz to osiągnąć między innymi przez:
- alternatywy tekstowe dla treści nietekstowych (np. opis alternatywny do zdjęć i grafik, z których skorzystają osoby niewidome);
- transkrypcje tekstowe materiałów audio i filmów;
- napisy i audiodeskrypcje do filmów;
- logiczną strukturę treści (nagłówki, listy itp.);
- odpowiednie znaczniki dla każdej funkcji (formularzy i tabel danych), aby relacje między treścią były poprawnie zdefiniowane;
- wyróżnienia, które nie opierają się jedynie na kolorze;
- kolory tekstu, które są wyraźnie widoczne na kolorze tła;
- czytelność i widoczność treści i funkcji, gdy rozmiar tekstu zostanie zwiększony o 200%;
- niepublikowanie obrazów tekstu;
- responsywność — automatyczne dostosowywanie się widoku do szerokości ekranu urządzenia użytkownika.
Zasada 2: funkcjonalność
Spraw, by użytkownicy mogli znajdować i używać treści oraz funkcji, niezależnie od tego, jak nawigują (np. za pomocą samej klawiatury, samej myszy).
Możesz to osiągnąć między innymi przez:
- możliwość obsłużenia wszystkiego za pomocą samej klawiatury;
- opcję odtwarzania — wstrzymywać i zatrzymywać poruszające się treści;
- brak migających treści i możliwość wyłączania ruchomych elementów przez użytkownika;
- link pozwalający przeskoczyć szybko do treści („przejdź do treści”);
- zrozumiałe i pasujące do treści tytuły stron;
- zrozumiałe linki, których treść wyraźnie mówi, dokąd prowadzą;
- nagłówki, które jasno opisują treści i etykiety jasno opisujące co wpisać w dane pole formularza;
- dobrą widoczność elementu, który jest w danym momencie wybrany za pomocą klawiatury (fokus);
- unikanie złożonych gestów na ekranach dotykowych lub zapewnienie dla nich prostszej alternatywy;
- możliwość wyłączania i zmiany skrótów klawiaturowych.
Zasada 3: zrozumiałość
Spraw, by użytkownicy rozumieli treści i sposób działania strony lub aplikacji.
Możesz to osiągnąć między innymi przez:
- prosty język (bez zbędnych słów i urzędniczego żargonu);
- unikanie trudnych dla użytkowników słów i wyrażeń lub ich wyjaśnienie w prosty sposób;
- wyjaśnienia do skrótów i akronimów;
- określenie w kodzie strony/aplikacji, w jakim języku jest jej treść;
- spójny wygląd i działanie elementów na wszystkich podstronach;
- widoczne i zrozumiałe etykiety przy każdym polu formularza;
- dostępne i zrozumiałe komunikaty błędów w formularzach i podpowiedzi jak je poprawić.
Zasada 4: solidność
Spraw, by treści i funkcje działały poprawnie w wielu różnych programach użytkowników (np. przeglądarkach internetowych oraz czytnikach ekranu osób niewidomych).
Możesz to osiągnąć między innymi przez:
- prawidłowy kod, zgodny ze standardem sieciowym HTML;
- dostępne dla użytkowników korzystających z technologii asystujących informacje o statusie/stanie;
- zgłaszanie przez technologie asystujące pojawiających się ważnych komunikatów czy okien modalnych.
Dodatkowe materiały
Więcej informacji o wytycznych WCAG znajdziesz w:
- Ostatnia modyfikacja:
- 24.01.2024 10:18 Małgorzata Wenek
- Pierwsza publikacja:
- 27.01.2021 16:49 Jakub Dębski