Trendbook #7: Standard WCAG jako strategia w rozwoju firmy w internecie
BLOG | 5 sierpnia 2024 r.
Wiele osób związanych z marketingiem w sieci, w tym z kampaniami w social mediach oraz designem, słyszało o tajemniczo brzmiącym skrócie WCAG. Niewielu kojarzy go jednak z korzyściami, jakie przynosi biznesowi. Wprowadzenie standardu WCAG (Web Content Accessibility Guidelines) w treściach internetowych jest obecnie nie tylko trendem, ale także wymogiem płynącym z przepisów prawa, o których jeszcze niewielu z nas wie.
Co to jest WCAG?
Web Content Accessibility Guidelines (WCAG) to zbiór międzynarodowych wytycznych dotyczących dostępności serwisów internetowych i aplikacji mobilnych. Odnosi się do treści, dźwięków, obrazów, kodu i znaczników. WCAG stworzone zostało przez konsorcjum W3C (World Wide Web Consortium) w celu ustanowienia jednolitych standardów projektowania stron www i aplikacji webowych, tak aby były one dostępne dla wszystkich użytkowników niezależnie od poziomu ich sprawności fizycznej i psychicznej.
Zasady WCAG 2.1
Standard WCAG opiera się na 4 zasadach: postrzegalność, funkcjonalność, zrozumiałość, kompatybilność. Są one podzielone na 13 wytycznych, a te – na kryteria sukcesu.
1. Postrzegalność
Spraw, by użytkownicy mogli korzystać ze strony internetowej lub aplikacji za pomocą dostępnych dla nich zmysłów. Jak to zrobić?
• dodaj alternatywy tekstowe dla treści nietekstowych (np. opis alternatywny do zdjęć i grafik),
• dodaj transkrypcje tekstowe materiałów audio i filmów,
• twórz napisy i audiodeskrypcje do filmów,
• zachowaj logiczną strukturę treści (nagłówki, listy itp.),
• stosuj kolory tekstu, które są wyraźnie widoczne na kolorze tła,
• dbaj o czytelność i widoczność treści i funkcji, gdy rozmiar tekstuzostanie zwiększony o 200%,
• nie publikuj obrazów tekstu,
• dbaj o responsywność – automatyczne dostosowywanie się widoku do szerokości ekranu urządzenia użytkownika.
2. Funkcjonalność
Pomóż klientom znajdować i używać treści oraz funkcji, niezależnie od tego, jak nawigują (za pomocą klawiatury, myszy, czy innych urządzeń).
Jak to zrobić?
• ustaw możliwość obsłużenia wszystkiego za pomocą samej klawiatury,
• daj opcję odtwarzania, wstrzymywania i zatrzymywania poruszające się treści,
• usuń migające treści i umożliw wyłączanie ruchomych elementów przez użytkownika,
• wstaw link pozwalający przeskoczyć szybko do treści
• buduj zrozumiałe i pasujące do treści tytuły stron,
• wstawiaj zrozumiałe linki, których treść wyraźnie mówi, dokąd prowadzą,
• wstawiaj nagłówki, które jasno opisują treści i etykiety jasno opisujące co wpisać w dane pole formularza.
3. Zrozumiałość
Pozwól łatwo zrozumieć treści i sposób działania strony. Jak to zrobić?
• stosuj prosty język,
• wyjaśniaj skróty i akronimy,
• określaj w kodzie strony/aplikacji w jakim języku jest jej treść,
• dbaj o spójny wygląd i działanie elementów na wszystkich podstronach,
• stosuj widoczne i zrozumiałe etykiety przy każdym polu formularza,
• stosuj dostępne i zrozumiałe komunikaty błędów w formularzach i podpowiedzi jak je poprawić.
4. Kompatybilność
Sprawiaj, by treści i funkcje działały poprawnie w różnych programach (np. przeglądarkach internetowych oraz czytnikach ekranu osób niewidomych).
Jak to zrobić?
• stosuj prawidłowy kod, zgodny ze standardem sieciowym HTML,
• stosuj dostępne dla użytkowników korzystających z technologii asystujących informacje o statusie/ stanie,
• umożliwiaj zgłaszanie przez technologie asystujące pojawiających się ważnych komunikatów czy okien modalnych.
To dopiero 50% artykułu. Resztę znajdziesz w Trendbooku "Diversity, Equity, Inclusion". Możesz go pobrać, klikając w link poniżej.
Autor tekstu
ŁUKASZ WOLFF
Od ponad 12 lat związany zawodowo z marketingiem internetowym, kampaniami contentowymi i projektowaniem w duchu digital first. Właściciel Sigmeo współpracujący z agencjami reklamowymi i markami w zakresie planowania, analizy i optymalizacji wielokanałowych kampanii digitalowych oraz designu. Wykładowca akademicki, doradca, szkoleniowiec. Doradza oraz przeprowadza audyty w zakresie dostępności cyfrowej. Tworzy oraz dostosowuje strony internetowe do wymagań WCAG.
