WCAG a prawidłowa struktura strony.

„Kiedy wypełniasz formularz na stronie, a za tobą odzywa się mały głos: „Tato, a dlaczego wieje wiatr…?” – wiesz, że skupienie właśnie się ulotniło.

Sięgasz na wyżyny rodzicielstwa, tłumaczysz najlepiej jak potrafisz i wracasz do komputera.

Zmęczony, próbujesz odnaleźć miejsce, w którym przerwałeś. Niestety, strona wita Cię kompletnym brakiem wskazówek – żadnego wyraźnego kursora, żadnego wyróżnionego pola. Pozostaje Ci tylko wytężyć wzrok (na szczęście jeszcze dobry), żeby w końcu trafić tam, gdzie skończyłeś.

Tyle że cała energia mentalna właśnie się wyczerpała.

I nie jest to wcale rzadka sytuacja. Jako użytkownik – po prostu machniesz ręką, zrezygnujesz z transakcji i pójdziesz do konkurencji, gdzie życie jest prostsze.
Jako właściciel serwisu – właśnie straciłeś klienta. A może i kilku, jeśli ta wieść rozejdzie się newsletterem nożnym.”

To, co właśnie opisałem, to tylko jeden przykład, jak brak struktury potrafi rozwalić doświadczenie użytkownika. WCAG nie wymyślono dla zabawy – te zasady zaczynają się od najprostszej rzeczy: poukładania treści tak, żeby były czytelne i dla ludzi, i dla maszyn.

W praktyce WCAG pokazuje, jak projektować strony przyjazne dla osób z niepełnosprawnościami – ale korzystają na tym wszyscy użytkownicy. Przestrzeganie tych zasad eliminuje sytuacje takie, jak ta ze wstępu: chaos, zgubiony kursor i frustracja.

Pod pojęciem „treści internetowe” kryją się nie tylko teksty, obrazy czy dźwięki, które widzisz na stronie, ale też cały kod i znaczniki, które decydują o tym, jak ta strona wygląda i działa.

Warto pamiętać, że dla wielu osób sytuacja ze wstępu – zgubiony kursor, brak wyróżnionego pola – to nie chwilowa niedogodność, tylko codzienność. Część użytkowników korzysta więc z dodatkowych technologii, jak czytniki ekranu czy specjalne narzędzia nawigacji. Ale żeby te narzędzia działały, strona musi mieć poprawną strukturę i semantykę. I właśnie do tego służy WCAG.

Gazety a strony internetowe.

Jeśli masz odpowiednią ilość lat, to pewnie pamiętasz taki wynalazek jak gazeta. Tak, kawałki papieru z atramentem, te tańsze brudzące tuszem i te lepsze… niebrudzące , obie miały jedną ogromną zaletę – strukturę.

Gazety były (a może nadal są) zaprojektowane po to, aby kierować twój wzrok po jej częściach. Nagłówek przyciągał uwagę, lead wciągał do czytania, treść główna tłumaczyła temat, a boczne kolumny wciskały reklamy. 

I co ciekawe – te elementy miały swoje nazwy. A w świecie stron internetowych znajdziesz je pod bardzo podobnym nazewnictwem.

Oto jak struktura gazety odzwierciedlona jest w języku HTML

Swoboda, z jaką można pisać w HTML-u, działa jak obosieczny miecz. Z jednej strony – nie musisz się przejmować nazewnictwem elementów, bo strona i tak się wyświetli. Z drugiej – właśnie dlatego wiele elementów semantycznych bywa pomijanych albo używanych źle. A to sprawia, że zamiast pomagać technologiom wspierającym w lepszym rozumieniu treści, tylko im przeszkadzają.

Co to są właściwie technologie wspierające?

To programy i funkcje systemowe, które pomagają osobom z różnymi ograniczeniami wygodniej korzystać z komputera, telefonu czy stron internetowych.

Mówiąc prościej – to narzędzia, które „tłumaczą” zawartość cyfrowego świata tak, żeby była dostępna dla każdego, niezależnie od tego, czy ktoś widzi, słyszy czy obsługuje myszkę czy też nie.

Do najpopularniejszych należą m.in.:

• czytniki ekranu – programy, które odczytują na głos treści na stronie lub pokazują je w formie brajla,
• nawigacja klawiaturą – możliwość poruszania się po stronie bez użycia myszki,
• powiększanie treści i kontrast – ustawienia systemowe dla osób słabowidzących.

Dlaczego warto na to zwrócić uwagę? Cóż, przez same liczby, które rzucają światło na to jak duży jest problem i w jaki sposób możemy temu zaradzić.

Co z tego wynika? (szanse)

• Większy rynek – uwzględniając zasady dostępności, otwierasz się (globalnie) na miliony dodatkowych użytkowników.
• Lepsze doświadczenie dla wszystkich – prostsza nawigacja, wyraźniejsze formularze, sensowna struktura = mniej frustracji dla każdego.
• SEO i widoczność – Google kocha dobrze poukładane treści (nagłówki, landmarki), więc poprawiasz ranking.
• Przewaga konkurencyjna – Twoja strona działa tam, gdzie konkurencja się wykłada.
• Spełnienie wymogów prawnych – w wielu branżach i krajach dostępność to już nie opcja, tylko obowiązek.

Odpowiednia struktura to pierwsza rzecz, na którą warto zwrócić uwagę. Dlaczego? Bo to jedna z najprostszych rzeczy do naprawienia – a jednocześnie taka, która potrafi zlikwidować sporą część problemów z dostępnością.

1. Nagłówki i hierarchia
   • Jeden h1 na stronę, logiczne h2, h3.
   • Dzięki temu screen reader czyta treści jak spis treści w książce, a nie jak ścianę tekstu.
2. Landmarki (czyli sekcje strony)
   • header, nav, main, footer, aside.
   • Pozwalają technologiom wspierającym „skakać” między sekcjami, zamiast czytać wszystko od deski do deski.
3. Formularze i etykiety
   • Każde pole powinno mieć label i wyraźny focus (podkreślenie, że element jest aktywny).
   • Użytkownik nie musi zgadywać, co gdzie wpisać, ani szukać kursora jak igły w stogu siana.
4. Logiczna kolejność (tab order)
   • Naturalny przepływ przy korzystaniu z klawiatury.
   • Żadnych pułapek ani przeskakiwania w losowe miejsca.

Co to daje?

• Dla czytników ekranów: strona zaczyna mieć naturalną kolej treści. Programy wiedzą, gdzie zacząć, jak „zaintonować” i jak nazwać elementy, aby użytkownik zawsze wiedział, gdzie jest i co czyta.
• Dla osób poruszających się klawiaturą: rośnie wygoda i znika frustracja. Użytkownik szybciej dociera do celu, a Ty eliminujesz zbędne przeszkody, które z perspektywy biznesu oznaczają jedno – mniej porzuconych formularzy i więcej konwersji.

Jakie są częste błędy dostępności?

Jest kilka grzeszków, które zdarzają się nawet wtedy, gdy strona ma już podstawową strukturę. Najczęściej wynikają z pracy przy treściach i obrazkach – bo łatwo wtedy „pójść na skróty” i zapomnieć o semantyce.

Typowe błędy to:

1. Brak nagłówka h1
   strona nie ma głównego tytułu. Użytkownik (i Google) nie wiedzą, o czym ona właściwie jest.
2. Zła kolejność nagłówków
   po h1 od razu leci h3, bo akurat tak ładniej wygląda. Efekt? Screen reader czyta to jak chaotyczny spis treści.
3. Brak opisów obrazków (alt)
   grafika zostaje „niewidzialna” dla osób korzystających z czytników ekranu. A wystarczy jedno zdanie, żeby nadać jej sens.
4. Nieopisane nawigacje
   na stronie jest kilka menu, ale żadna nie ma określonej roli. Użytkownik dostaje komunikat „nawigacja, nawigacja, nawigacja” i błądzi.
5. Kilka elementów main
   strona nagle ma dwa „główne obszary treści”. Technologia wspierająca nie wie, który jest tym prawdziwym.
6. Linki typu „kliknij tutaj” albo „więcej”
   brzmią niewinnie, ale w oderwaniu od kontekstu są kompletnie bez sensu. Użytkownik korzystający z czytnika ekranu słyszy tylko „kliknij tutaj” – i nie wie, co go tam czeka.
7. Brak widocznego focusa na elementach interaktywnych
   czyli przyciski, linki czy pola formularza nie pokazują, że są aktywne. Dla osób nawigujących klawiaturą to jak chodzenie po ciemku.
8. Przeskakujący „tab order”
   kolejność elementów przy nawigacji Tabem jest inna niż wizualna kolejność na stronie. Użytkownik skacze jak w losowym quizie i łatwo się gubi.
9. Treści w formie obrazka zamiast tekstu
   np. nagłówek wrzucony jako JPG, bo „ładna czcionka”. Dla czytników ekranu i SEO to czysta pustka.

Inne problemy, które nie są związane ze strukturą.

WCAG to nie tylko semantyka HTML. Wytyczne są dużo szersze i obejmują m.in. odpowiedni kontrast kolorów. To właśnie wtedy grafik, który godzinami dobierał perfekcyjne odcienie, odkrywa, że jego wymarzona paleta jest „za mdła” w stosunku do tła i nie spełnia norm.

Jednym z rozwiązań, o którym pisałem w innym artykule, jest tworzenie stron dostosowanych do preferencji użytkownika. Dzięki CSS można wykryć np. ustawienia wysokiego kontrastu i automatycznie dostosować projekt. W ten sposób wilk (grafik) syty i owca (WCAG) cała – projekt zachowuje swoje walory, a osoby ze słabszym wzrokiem dostają stronę w wersji, która jest dla nich czytelna.

Przydatne narzędzia do sprawdzania WCAG:

• WAVE – Web Accessibility Evaluation Tool – szybkie sprawdzenie strony online, pokazuje błędy i ostrzeżenia.
• axe DevTools – rozszerzenie do przeglądarki (Chrome/Firefox), integruje się z narzędziami deweloperskimi.
• Lighthouse (Google) – wbudowane w Chrome, sprawdza m.in. dostępność i wydajność.
• Accessibility Insights – darmowe narzędzie Microsoftu do audytów dostępności.
• Contrast Checker – WebAIM – prosty tester kontrastu kolorów (must-have dla grafików).
• Color Oracle – symulator daltonizmu, pozwala zobaczyć stronę oczami osoby z zaburzeniami widzenia barw.
• accessibility checker - narzędzie do sprawdzenia zgodności z WCAG

Dostępność to nie fizyka kwantowa. Wystarczy zacząć od podstaw – czyli od poprawnej struktury strony. To fundament, który sprawia, że technologie wspierające wiedzą, jak odczytać Twoją treść, a użytkownicy nie muszą zastanawiać się w którym miejscu się znajdują.

Struktura nie tylko pomaga osobom z niepełnosprawnościami, ale też ułatwia życie wszystkim użytkownikom – a w konsekwencji przekłada się na większą konwersję i mniejsze straty klientów.

Pobierz praktyczną ściągę WCAG.

Masz już wiedzę, przykłady i narzędzia – teraz czas na działanie.
Pobierz mój PDF z checklistą 10 najczęstszych błędów dostępności oraz instrukcją, jak sprawdzić stronę narzędziami WCAG.

Dzięki temu:

• sprawdzisz swoją stronę w mniej niż godzinę,
• zobaczysz, gdzie naprawdę tracisz użytkowników,
• i dowiesz się, jak szybko to naprawić.

pobierz checklistę teraz (PDF - 520Kb)

O autorze.

Od lat związany z szeroko rozumianą informatyką. Pierwszą stronę stworzyłem w liceum, za co otrzymałem wyróżnienie.

Ciągle uczę się, aby dorównać tempu rozwoju nowoczesnych technologii łącząc je z wiedzą o psychologii aby zwiększać skuteczność stron i aplikacji internetowych.