WCAG 2.1 od A do Z: Jak zadbać o dostępność cyfrową?

Co to jest WCAG 2.1?

WCAG 2.1 (Web Content Accessibility Guidelines) to międzynarodowy standard techniczny określający, jak tworzyć strony www i aplikacje mobilne, aby były dostępne dla osób z niepełnosprawnościami (wzroku, słuchu, ruchu, poznawczymi). Wersja 2.1 rozszerza wcześniejsze zasady o wytyczne dla urządzeń mobilnych oraz osób słabowidzących.

Struktura WCAG 2.1 i poziomy zgodności

Standard opiera się na 4 głównych zasadach. Dzielą się one na wytyczne, do których przypisane są konkretne kryteria sukcesu wdrażane na trzech poziomach:

• Poziom A: Absolutne minimum. Bez niego strona jest całkowicie niefunkcjonalna dla wielu użytkowników.
• Poziom AA: Standard rynkowy i prawny. Wymagany przez polskie i europejskie przepisy dla sektora publicznego i biznesu.
• Poziom AAA: Najwyższy stopień dostępności, trudny do wdrożenia w całym serwisie.

Zasady POUR – Fundamenty WCAG 2.1

Wszystkie wytyczne WCAG 2.1 opierają się na czterech głównych zasadach tworzących akronim POUR:

• Perceivable (Postrzegalność) - Treść musi być dostarczana w sposób czytelny dla zmysłów użytkownika (wzroku, słuchu).
• Operable (Funkcjonalność) - Interfejs i nawigacja muszą być możliwe do obsługi za pomocą różnych urządzeń (np. samej klawiatury).
• Understandable (Zrozumiałość) - Informacje oraz obsługa strony muszą być jasne, logiczne i przewidywalne.
• Robust (Solidność) - Kod strony musi być poprawny i kompatybilny z obecnymi oraz przyszłymi technologiami (przeglądarki, czytniki ekranu).

Kto musi spełniać standardy WCAG?

Dostępność cyfrowa to już od dawna nie tylko "dobra praktyka", ale twardy wymóg prawny, który stale się rozszerza:

• Sektor publiczny (Obecnie): W Polsce urzędy państwowe i samorządowe, szkoły, uczelnie, szpitale oraz spółki skarbu państwa mają bezwzględny obowiązek spełniania standardu WCAG 2.1 na poziomie AA. Wynika to wprost z Ustawy z dnia 4 kwietnia 2019 r. o dostępności cyfrowej. Za brak zgodności grożą kary finansowe.
• Sektor prywatny i biznes: Na mocy Europejskiego Aktu o Dostępności (EAA), od 28 czerwca 2025 roku standardy dostępności (oparte o WCAG) staną się obowiązkowe dla ogromnej części prywatnego biznesu. Obejmą one m.in. e-commerce (sklepy internetowe), bankowość, usługi transportowe, telekomunikację oraz serwisy VOD i e-booki.

Statystyki: Jak wygląda rzeczywistość?

Mimo rosnącej świadomości i zaostrzających się przepisów, globalny obraz dostępności w sieci jest wciąż alarmujący. Według cenionego, corocznego raportu WebAIM Million 2026 (badającego milion najpopularniejszych stron głównych na świecie):

• Aż 95,9% przeanalizowanych stron zawierało podstawowe błędy dostępności wykrywalne już na etapie testów automatycznych.
• Oznacza to, że zaledwie około 4% najpopularniejszych witryn w internecie spełnia minimum standardów WCAG.
• Najczęstsze błędy to wciąż absolutne podstawy, których łatwo uniknąć: zbyt niski kontrast tekstu (81% stron), brak tekstów alternatywnych dla grafik (54,5%) oraz nieprawidłowo zaimplementowane linki i przyciski.

Konkretne przykłady z życia

1<!-- ZŁE: outline: none usuwa wizualny fokus -->
2<button onclick="openMenu()" style="outline: none;">Menu</button>
3
4<!-- DOBRE: natywny outline lub custom focus-visible -->
5<button onclick="openMenu()">Menu</button>
6
7<style>
8  button:focus-visible {
9    outline: 3px solid #005fcc;
10    outline-offset: 2px;
11  }
12</style>

1<!-- ZŁE: czytnik odczyta "zdjecie produkt 12345 xyz.jpg" -->
2<img src="zdjecie_produkt_12345_xyz.jpg" />
3
4<!-- DOBRE: czytnik odczyta opis -->
5<img src="zdjecie_produkt_12345_xyz.jpg" alt="Niebieski kubek ceramiczny 300 ml" />
6
7<!-- DEKORACYJNY: czytnik całkowicie pomija -->
8<img src="linia-oddzielajaca.svg" alt="" role="presentation" />

1<!-- ZŁE: czytnik nie wie, co to za pole ani jaki błąd -->
2<input type="email" placeholder="Wpisz email" />
3<span style="color: red;">Błąd!</span>
4
5<!-- DOBRE: label + opis błędu z role="alert" -->
6<label for="email">Adres e-mail</label>
7<input type="email" id="email" required aria-describedby="email-error" />
8<span id="email-error" role="alert">Podaj poprawny adres e-mail, np. jan@example.pl</span>

1<!-- Bez tego użytkownik czytnika przesłuchuje 20+ linków menu przed treścią -->
2<a href="#main-content" class="skip-link">Przejdź do treści</a>
3<nav>
4  <a href="/">Strona główna</a>
5  <a href="/oferta">Oferta</a>
6  <a href="/kontakt">Kontakt</a>
7  <!-- ... 15+ kolejnych linków ... -->
8</nav>
9<main id="main-content">
10  <h1>Właściwa treść strony</h1>
11</main>

1<!-- W 2023 r. sieć AMC pozwana za brak napisów w reklamach online -->
2<!-- Rozwiązanie: plik .vtt z napisami -->
3<video controls>
4  <source src="reklama.mp4" type="video/mp4" />
5  <track kind="captions" src="napisy-pl.vtt" srclang="pl" label="Polski" />
6</video>

1<!-- ZŁE: czytnik nie odczyta dynamicznie wstrzykniętego tekstu -->
2<div id="toast"></div>
3<script>
4  document.getElementById("toast").innerHTML = "Zapisano!";
5</script>
6
7<!-- DOBRE: aria-live="polite" każe czytnikowi odczytać zmianę -->
8<div id="toast" aria-live="polite"></div>
9<script>
10  document.getElementById("toast").innerHTML = "Zapisano!";
11</script>

1<!-- ZŁE: działa tylko na hover, niedostępne klawiaturowo -->
2<style>
3  .dropdown-content { display: none; }
4  .parent:hover .dropdown-content { display: block; }
5</style>
6
7<!-- DOBRE: otwiera się też przy fokusie klawiaturowym -->
8<style>
9  .dropdown-content { display: none; }
10  .parent:hover .dropdown-content,
11  .parent:focus-within .dropdown-content { display: block; }
12</style>

Przydatne linki i źródła

Chcesz zgłębić temat lub sprawdzić konkretne wytyczne dla programistów i projektantów? Zajrzyj do oficjalnych źródeł:

• Autoryzowane polskie tłumaczenie specyfikacji WCAG 2.1 (W3C)
• Oficjalna dokumentacja WCAG 2.1 (W3C) - wersja angielska
• Baza wiedzy o dostępności cyfrowej na portalu Gov.pl
• Wyniki badania WCAG WebAIM