WCAG 2.1 dostępność cyfrowa: co musi spełniać Twoja strona

Wchodzisz na stronę, a tekst jest jasnoszary na białym tle. Formularz nie mówi, które pole zawiera błąd. Zdjęcie z ważną informacją nie ma opisu. Dla wielu osób to codzienność, a nie drobna niedogodność. WCAG 2.1 dostępność cyfrowa to zestaw zasad, który pomaga takich sytuacji unikać. W tym wpisie wyjaśniam, czym są wytyczne, co wynika z ustawy i które błędy na stronach pojawiają się najczęściej.

WCAG 2.1 dostępność cyfrowa – czym jest i kogo dotyczy

WCAG (Web Content Accessibility Guidelines) to międzynarodowe wytyczne dotyczące dostępności treści internetowych. Opracowuje je organizacja W3C. Wersja 2.1 opisuje, jak tworzyć strony i aplikacje, z których mogą korzystać także osoby z niepełnosprawnościami: niewidome, słabowidzące, niesłyszące, z ograniczoną sprawnością rąk albo z trudnościami w koncentracji.

Dostępność nie jest jednak tylko dla wąskiej grupy. Z dobrze zbudowanej strony łatwiej korzysta też osoba, która czyta na telefonie w słońcu, ma złamaną rękę i obsługuje stronę klawiaturą, albo po prostu nie lubi szukać informacji po omacku. Dlatego dostępność jest też elementem jakości i użyteczności serwisu.

Wytyczne mają trzy poziomy zgodności: A (podstawowy), AA (zalecany w większości wymogów prawnych) i AAA (najbardziej rygorystyczny). W praktyce najczęściej mówimy o poziomie AA.

Ustawa o dostępności cyfrowej – co z niej wynika

W Polsce kwestie dostępności stron reguluje ustawa o zapewnianiu dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych. Wprowadza ona do polskiego prawa wymagania zgodne z WCAG 2.1. Dotyczy przede wszystkim podmiotów publicznych, takich jak urzędy, szkoły, szpitale czy instytucje kultury.

Najważniejsze obowiązki, o których warto pamiętać:

• strona i aplikacje mają spełniać kryteria WCAG 2.1 (w praktyce na poziomie AA),
• podmiot publikuje deklarację dostępności, czyli informację o stanie zgodności i znanych ograniczeniach,
• użytkownik powinien mieć możliwość zgłoszenia problemu z dostępnością lub poproszenia o informację w dostępnej formie,
• dostępne mają być także dokumenty i materiały publikowane online, np. pliki PDF.

Jeśli prowadzisz firmę, sprawdź też, czy nie obejmują Cię nowsze przepisy dotyczące dostępności produktów i usług, np. sklepów internetowych. Zakres obowiązków zależy od rodzaju działalności, więc przy konkretnej sprawie najlepiej zweryfikować aktualny stan prawny. Niezależnie od przepisów dostępna strona to po prostu szersza grupa odbiorców.

Cztery zasady WCAG 2.1, na których opiera się dostępność

Wszystkie kryteria WCAG są uporządkowane w cztery zasady. Przyjęło się je skracać do angielskiego POUR. Po polsku brzmią: postrzegalność, funkcjonalność, zrozumiałość i solidność.

1. Postrzegalność

Informacje i elementy interfejsu muszą być podane w sposób, który użytkownik może odebrać swoimi zmysłami. Co to oznacza w praktyce?

• obrazy niosące treść mają alternatywę tekstową,
• nagrania wideo mają napisy, a w razie potrzeby także transkrypcję lub audiodeskrypcję,
• tekst jest odpowiednio kontrastowy względem tła,
• treść da się powiększyć i nadal jest czytelna, a informacja nie opiera się wyłącznie na kolorze.

2. Funkcjonalność

Z całej strony da się korzystać bez myszy, a użytkownik ma dość czasu na wykonanie zadań. Kluczowe jest to, żeby:

• wszystkie elementy aktywne (menu, przyciski, formularze) obsługiwało się klawiaturą,
• widoczny był fokus, czyli podświetlenie elementu, na którym aktualnie jesteś,
• strony nie zawierały pułapek klawiaturowych,
• użytkownik mógł zatrzymać lub ukryć ruchome treści, np. karuzele,
• istniały mechanizmy nawigacji: tytuły stron, sensowna kolejność, możliwość pominięcia powtarzalnych bloków.

Wersja 2.1 dodała także kryteria związane z urządzeniami mobilnymi i gestami, np. alternatywę dla skomplikowanych gestów dotykowych.

3. Zrozumiałość

Treść i obsługa serwisu mają być przewidywalne i jasne. Chodzi o określenie języka strony, spójną nawigację, zrozumiałe komunikaty oraz pomoc w formularzach. Użytkownik powinien wiedzieć, co się stało, gdy popełni błąd, i jak go naprawić.

4. Solidność

Kod strony ma być na tyle poprawny i standardowy, żeby różne technologie, w tym czytniki ekranu, mogły go prawidłowo zinterpretować. To tutaj liczy się poprawny HTML, właściwe nazwy, role i stany elementów interaktywnych oraz komunikaty o statusie, np. o dodaniu produktu do koszyka.

Najczęstsze błędy dostępności na stronach internetowych

Audyty dostępności zwykle odsłaniają podobne problemy. Dobra wiadomość: wiele z nich da się naprawić stosunkowo prosto, jeśli wiesz, na co patrzeć.

Za niski kontrast

WCAG wymaga dla zwykłego tekstu stosunku kontrastu co najmniej 4,5:1, a dla dużego tekstu 3:1. Podobne minimum 3:1 dotyczy elementów interfejsu, takich jak obramowania pól formularza czy ikony niosące informację. Częste przykłady to szary tekst na białym tle, białe napisy na jasnych zdjęciach albo przyciski, które zlewają się z tłem. Kontrast można zmierzyć darmowymi narzędziami, więc nie trzeba polegać na oku.

Chaos w nagłówkach

Nagłówki tworzą szkielet strony. Osoby korzystające z czytnika ekranu często przeskakują między nimi, żeby zorientować się w treści. Typowe błędy to:

• wybieranie nagłówka tylko ze względu na rozmiar czcionki,
• pomijanie poziomów (H2, a od razu H4),
• pogrubiony tekst udający nagłówek, bez właściwego znacznika,
• brak nagłówka głównego na stronie lub kilka sprzecznych.

Rozwiązanie: używaj znaczników nagłówków zgodnie z hierarchią, a wygląd ustawiaj w CSS.

Formularze bez etykiet i czytelnych błędów

Placeholder wewnątrz pola nie zastępuje etykiety, bo znika po wpisaniu tekstu, a nie zawsze jest odczytywany jako nazwa pola. Każde pole powinno mieć powiązaną etykietę. Dodatkowo sprawdź:

• czy pola obowiązkowe są jasno oznaczone, nie tylko kolorem,
• czy komunikat błędu mówi, które pole wymaga poprawy i dlaczego,
• czy formularz da się wypełnić i wysłać samą klawiaturą,
• czy pola mają właściwe typy, np. adres e-mail czy telefon.

Brakujące lub bezużyteczne teksty alternatywne

Obraz niosący informację powinien mieć krótki opis, który oddaje jego sens, a nie tylko nazwę pliku typu „IMG_2043”. Z kolei grafiki czysto dekoracyjne powinny mieć pusty atrybut alt, żeby czytnik ekranu je pominął. Osobno pamiętaj o ikonach i przyciskach graficznych. Przycisk z lupą bez nazwy to dla czytnika ekranu po prostu „przycisk”.

Inne częste potknięcia

• linki o treści „kliknij tutaj” lub „więcej”, które poza kontekstem nic nie mówią,
• brak widocznego fokusu przy nawigacji klawiaturą,
• wideo bez napisów,
• niedostępne pliki PDF, np. skany bez warstwy tekstowej,
• brak ustawionego języka strony.

Jak zacząć sprawdzać dostępność własnej strony

Nie musisz od razu zamawiać pełnego audytu, żeby zobaczyć skalę problemu. Możesz zacząć od kilku prostych kroków:

1. Przejdź stronę samą klawiaturą. Użyj klawiszy Tab, Shift+Tab, Enter i spacji. Jeśli gubisz się lub nie widzisz, gdzie jesteś, masz pierwszy problem do naprawy.
2. Powiększ stronę do 200%. Sprawdź, czy treść się nie nakłada i nie znika.
3. Sprawdź kontrasty. Przeanalizuj kolory tekstów, przycisków i ramek pól.
4. Przejrzyj strukturę nagłówków. Zobacz, czy ich lista tworzy sensowny spis treści.
5. Uruchom czytnik ekranu. Nawet krótki test pokazuje, jak odbierana jest strona bez patrzenia na nią.
6. Użyj automatycznych narzędzi, ale nie ufaj im ślepo. Wychwytują tylko część błędów, bo ocena np. jakości opisu obrazka wymaga człowieka.

Więcej poradników z pogranicza projektowania, treści i technologii znajdziesz w naszym poradniku na blogu.

Szkolenie WCAG 2.1 – dostępność cyfrowa z trenerem 1 do 1

Jeśli odpowiadasz za stronę w firmie lub instytucji, tworzysz treści albo projektujesz interfejsy, samodzielne zbieranie wiedzy z kilkunastu źródeł bywa żmudne. Dlatego przygotowaliśmy kurs WCAG 2.1 – dostępność cyfrowa. Prowadzimy go indywidualnie, w formule 1 do 1, więc tempo i przykłady możesz dopasować do własnych potrzeb i do swojego serwisu.

Najważniejsze informacje organizacyjne:

• szkolenie trwa 14 godzin zegarowych, w ciągu 2 dni, w godzinach 8:30–15:15,
• możesz wybrać formę online (MS Teams lub Google Meet) za 2500 zł netto albo stacjonarną za 3700 zł netto,
• szkolenie stacjonarne odbywa się w dowolnym mieście w Polsce lub w siedzibie Twojej firmy,
• po szkoleniu otrzymujesz certyfikat w standardzie VCC (Akademia Edukacji VCC, nr AE-001-0874-001), zgodny z BUR.

Jeśli chcesz zobaczyć, jakie inne tematy mamy w ofercie, od projektowania po strony WWW, zajrzyj na listę wszystkich szkoleń. Wśród nich są m.in. HTML i CSS oraz Figma, które dobrze uzupełniają wiedzę o dostępności.

Podsumowanie: dostępność to proces, nie jednorazowy projekt

Dostępność cyfrowa zgodna z WCAG 2.1 opiera się na czterech zasadach: postrzegalności, funkcjonalności, zrozumiałości i solidności. Ustawa nakłada konkretne obowiązki na podmioty publiczne, ale korzyści z dostępnej strony odczuje każdy właściciel serwisu. Zacznij od kontrastu, nagłówków, formularzy i opisów obrazów, bo to obszary, w których poprawa jest zwykle najbardziej widoczna. Potem wprowadź zasady dostępności do codziennej pracy nad treściami i projektem.

Chcesz uporządkować tę wiedzę i przełożyć ją na swoją stronę? Przejdź do zapisów albo napisz do nas przez formularz kontaktowy na stronie akademia-komputerowa.pl. Pomożemy dobrać formę szkolenia i ustalić dogodny termin.

Najczęściej zadawane pytania

Czym jest WCAG 2.1?

To międzynarodowe wytyczne W3C opisujące, jak tworzyć dostępne strony internetowe i aplikacje. Zawierają kryteria zgodności na trzech poziomach: A, AA i AAA. W praktyce najczęściej wymaga się poziomu AA.

Jakie są cztery zasady WCAG?

To postrzegalność, funkcjonalność, zrozumiałość i solidność (w skrócie POUR). Pierwsza dotyczy tego, by treść dało się odebrać zmysłami, druga obsługi np. samą klawiaturą, trzecia jasności treści i komunikatów, a czwarta poprawnego kodu zgodnego z technologiami asystującymi.

Kogo dotyczy ustawa o dostępności cyfrowej?

Ustawa dotyczy przede wszystkim podmiotów publicznych, np. urzędów, szkół czy instytucji kultury. Obowiązują je m.in. zgodność z WCAG 2.1 i publikacja deklaracji dostępności. Firmy prywatne mogą podlegać innym przepisom, zależnie od rodzaju oferowanych produktów i usług, więc warto sprawdzić aktualne regulacje.

Jaki kontrast tekstu wymaga WCAG 2.1?

Dla zwykłego tekstu minimalny stosunek kontrastu to 4,5:1, a dla dużego tekstu 3:1. Minimum 3:1 dotyczy też istotnych elementów interfejsu, takich jak obramowania pól formularza. Kontrast można sprawdzić bezpłatnymi narzędziami online.

Czy do szkolenia WCAG potrzebuję własnego programu?

W bazie informacji o szkoleniu wymóg własnej wersji programu dotyczy kursów z oprogramowania, np. Adobe. Konkretne ustalenia dotyczące Twojego szkolenia WCAG warto potwierdzić przez formularz kontaktowy lub podczas zapisu.

Ile trwa szkolenie WCAG 2.1 i ile kosztuje?

Szkolenie trwa 14 godzin zegarowych w ciągu 2 dni (8:30–15:15) i odbywa się indywidualnie, w formule 1 do 1. Cena to 2500 zł netto online albo 3700 zł netto stacjonarnie. Po szkoleniu otrzymujesz certyfikat w standardzie VCC.