Czym jest magiczny WCAG w projektowaniu stron internetowych?

Z oficjalnej strony Gov: WCAG to skrótowiec od Web Content Accessibility Guidelines, czyli wytycznych dotyczących dostępności treści internetowych.

Obowiązują one od 2019 roku dla podmiotów publicznych oraz od 28.06.2025 obowiązuje też podmioty gospodarcze świadczące usługi handlu elektronicznego! Brzmi strasznie, ale tak naprawdę nie jest aż tak trudne w implementacji.

Ale od początku. Po co nam coś takiego jak dostępność? Większość naszych potencjalnych użytkowników nie jest niepełnosprawna więc po co przejmować się takimi „głupotami”? Niestety wiele osób ma takie podejście i jest ono bardzo krzywdzące. Dodatkowo wbrew pozorom szkodzi naszej stronie, ponieważ… tworzenie dostępnej strony często poprawia doświadczenie dla „zwykłych” użytkowników. Warto też pamiętać, że każda osoba pełnosprawna jest jeden wypadek od bycia niepełnosprawnym, nie mówiąc już o starości i związanej z nią problemami.

Dla kogo ta dostępność?

Jak już wspomniałam w teorii dla nas wszystkich. Ale wytyczne głównie (choć nie tylko) skupiają się na osobach niewidomych/mających problem ze wzrokiem, niesłyszących oraz z problemami ruchowymi. W skrócie tacy użytkownicy powinni mieć dostęp do wszystkich treści i funkcjonalności naszej strony.

Kilka najważniejszych punktów jak poprawić podstawowe elementy dostępności:

Postrzegalność

• Logiczna i spójna struktura strony – używanie standardowych znaczników dla elementów strony (Czytniki ekranu najlepiej je odczytują).
• Zastosowanie alt tekstu dla grafik i transkrypcji video – Alt tekst dobrze aby był krótki i co najważniejsze powinien przekazywać wszystkie najważniejsze informacje z grafiki (Nie potrzeba dodawać alt tekstów do grafiki czysto ozdobnej).
• Odpowiedni kontrast oraz wyróżnianie nie tylko kolorem – Nawet czarno biała strona powinna nadal być czytelna
• Responsywność – Upewnienie się że przybliżenie do 200% jest nadal czytelne oraz że na różnych urządzeniach nasza strona nie traci treści (Są to ogólnie dobre praktyki tworzenia stron).

Funkcjonalność

• Możliwość nawigacji poprzez klawiaturę – Ktoś może poruszać się po stronie tylko za pomocą Tab i Enter więc trzeba upewnić się że strona jest poprawnie indeksowana i taki użytkownik może skorzystać z KAŻDEJ funkcjonalności (albo istnieje alternatywa do niedostępnych elementów).
• Dodanie opisów do linków i przycisków! – fajnie by ktoś z czytnikiem wiedział gdzie link prowadzi.
• Sensoryka – Uważać na intensywne błyski oraz dodać możliwość szybkiego za pauzowania odtwarzanych automatycznie animacji/video.
• Skiplink -warto je dodać, aby pozwolić na łatwe ominięcie danego fragmentu strony.

Dodatkowo warto stosować tzw. prosty język aby treść była zrozumiała dla większej ilości osób (oczywiście zależy to mocno od tego dla kogo jest planowana ta strona).

Podsumowując:

Polecam przy tworzeniu stron testować je w mniej „normalny” sposób. Można spróbować przeglądać je za pomocą samej klawiatury lub pobrać popularny czytnik ekranu: NVDA (w Windowsie wbudowany czytnik jest bardzo słaby) lub VoiceOver na Macu. Trzeba w tedy zwracać uwagę czy osoba, która z nich korzysta będzie miała dostęp do tych samych treści co osoba pełno sprawna.

Często nie możliwym jest dodanie wszystkich funkcjonalności ze względu na czas i koszty. Na szczęście jest to uwzględnione w rozporządzeniu. Dodatkowo ustawa nie dotyczy wszystkich stron, w których dochodzi do handlu więc warto sprawdzić co jest w niej uwzględnione (np. nie dotyczy mikro przedsiębiorstw).

Link do ustawy:

https://www.w3.org/Translations/WCAG21-pl

Źródła:

https://www.gov.pl/web/dostepnosc-cyfrowa/cztery-zasady-dostepnosci-cyfrowej
https://www.gov.pl/web/dostepnosc-cyfrowa/wcag-21-w-skrocie