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ł:
Top comments (0)