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

Ernest Przybył — Tue, 02 Jun 2026 18:44:51 +0000

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

Nawigacja klawiaturą – brak fokusa

<!-- ZŁE: outline: none usuwa wizualny fokus -->
<button onclick="openMenu()" style="outline: none;">Menu</button>

<!-- DOBRE: natywny outline lub custom focus-visible -->
<button onclick="openMenu()">Menu</button>

<style>
  button:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
</style>

Obrazek bez alt – czytnik czyta nazwę pliku

<!-- ZŁE: czytnik odczyta "zdjecie produkt 12345 xyz.jpg" -->
<img src="zdjecie_produkt_12345_xyz.jpg" />

<!-- DOBRE: czytnik odczyta opis -->
<img src="zdjecie_produkt_12345_xyz.jpg" alt="Niebieski kubek ceramiczny 300 ml" />

<!-- DEKORACYJNY: czytnik całkowicie pomija -->
<img src="linia-oddzielajaca.svg" alt="" role="presentation" />

Formularz – etykiety i błędy

<!-- ZŁE: czytnik nie wie, co to za pole ani jaki błąd -->
<input type="email" placeholder="Wpisz email" />
<span style="color: red;">Błąd!</span>

<!-- DOBRE: label + opis błędu z role="alert" -->
<label for="email">Adres e-mail</label>
<input type="email" id="email" required aria-describedby="email-error" />
<span id="email-error" role="alert">Podaj poprawny adres e-mail, np. jan@example.pl</span>

Link „Przejdź do treści"

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

Wideo bez napisów – realny przypadek sądowy

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

Dynamiczna treść (np. powiadomienie) – live region

<!-- ZŁE: czytnik nie odczyta dynamicznie wstrzykniętego tekstu -->
<div id="toast"></div>
<script>
  document.getElementById("toast").innerHTML = "Zapisano!";
</script>

<!-- DOBRE: aria-live="polite" każe czytnikowi odczytać zmianę -->
<div id="toast" aria-live="polite"></div>
<script>
  document.getElementById("toast").innerHTML = "Zapisano!";
</script>

Niedostępne dropdown menu – tylko hover

<!-- ZŁE: działa tylko na hover, niedostępne klawiaturowo -->
<style>
  .dropdown-content { display: none; }
  .parent:hover .dropdown-content { display: block; }
</style>

<!-- DOBRE: otwiera się też przy fokusie klawiaturowym -->
<style>
  .dropdown-content { display: none; }
  .parent:hover .dropdown-content,
  .parent:focus-within .dropdown-content { display: block; }
</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ł:

DEV Community: Ernest Przybył