Netova
•Zespół Netova

WCAG 2.2 - Nowe Standardy Dostępności Stron w 2026

WCAG 2.2 - Nowe Standardy Dostępności Stron w 2026

15% populacji ma jakąś formę niepełnosprawności. To ponad 1 miliard ludzi na świecie. Czy Twoja strona jest dla nich dostępna?

W 2026 roku accessibility (a11y) to nie tylko etyka. W wielu krajach to wymóg prawny.

Czym jest WCAG 2.2?

Web Content Accessibility Guidelines – globalny standard dostępności stron internetowych, stworzony przez W3C.

Wersja 2.2 (finalna: październik 2023, obowiązkowa w UE od 2025) dodaje 9 nowych kryteriów na top poprzednich wersji.

Poziomy zgodności:

  • A – Minimum (basic accessibility)
  • AA – Standard (wymagany prawnie w UE)
  • AAA – Premium (idealny, ale trudny do osiągnięcia)

Twój cel: WCAG 2.2 Level AA.

Nowe kryteria w WCAG 2.2 (musisz wiedzieć!)

1. Focus Appearance (2.4.11, AA)

Fokus klawiatury musi być wyraźnie widoczny (kontrast, rozmiar).

Źle:

button:focus {
  outline: none;
} /* ❌ Użytkownicy klawiatury nie wiedzą gdzie są */

Dobrze:

button:focus {
  outline: 3px solid #00d9ff;
  outline-offset: 2px;
}

2. Dragging Movements (2.5.7, AA)

Każda akcja "drag and drop" musi mieć alternatywę (np. przyciski).

Przykład:
Reordering listy – zamiast tylko drag, dodaj ↑↓ arrows.

3. Target Size (Minimum) (2.5.8, AA)

Klikalne elementy muszą mieć min. 24x24px.

Problem:
Małe ikony (16x16px) są trudne do kliknięcia na mobile.

Rozwiązanie:
Padding wokół ikony, zwiększający click area.

4. Consistent Help (3.2.6, A)

Linki do pomocy (FAQ, kontakt) muszą być w tym samym miejscu na każdej stronie.

5. Redundant Entry (3.3.7, A)

Nie proś o te same dane dwa razy (np. email w formularzu rejestracji i później w checkout).

6. Accessible Authentication (3.3.8, AA)

CAPTCHA musi mieć alternatywę (np. email verification zamiast "kliknij wszystkie sygnalizatory").

Najczęstsze błędy accessibility (2026)

❌ 1. Brak ALT text na obrazach

<!-- ŹLE -->
<img src="logo.png" />

<!-- DOBRZE -->
<img src="logo.png" alt="Netova - Strony Internetowe" />

❌ 2. Niski kontrast tekstu

Minimum: 4.5:1 dla normalnego tekstu, 3:1 dla dużego.

Źle: Szary tekst (#999) na białym tle
Dobrze: Ciemny (#333) na białym

Narzędzie: WebAIM Contrast Checker

❌ 3. Brak struktury semantycznej

<!-- ŹLE -->
<div class="header">O nas</div>

<!-- DOBRZE -->
<h2>O nas</h2>

Screen readery polegają na H1, H2, H3 do nawigacji.

❌ 4. Formularze bez label

<!-- ŹLE -->
<input type="email" placeholder="Email" />

<!-- DOBRZE -->
<label for="email">Email</label>
<input type="email" id="email" placeholder="twoj@email.com" />

❌ 5. Przyciski bez aria-label (ikony)

<!-- ŹLE -->
<button><IconTrash /></button>

<!-- DOBRZE -->
<button aria-label="Usuń element"><IconTrash /></button>

Narzędzia do testowania accessibility

Automatyczne:

  • axe DevTools (Chrome extension) – najlepsza
  • Lighthouse (wbudowane w Chrome DevTools)
  • WAVE (WebAIM)

Manualne:

  • Keyboard navigation – spróbuj używać strony bez myszki (Tab, Enter, Escape)
  • Screen reader – VoiceOver (Mac), NVDA (Windows)
  • Color blindness simulator – Sim Daltonism

Accessibility = Lepsze SEO

Google nagradza accessible strony, bo:

  • Semantic HTML = łatwiejsze crawlowanie
  • ALT text = kontekst dla obrazów
  • Struktura headings = jasna hierarchia

Bonus: Accessibility często = lepszy UX dla wszystkich.

Prawne konsekwencje niedostępności

Europa (European Accessibility Act – 2025)

Strony publiczne + e-commerce muszą być zgodne z WCAG 2.1 AA (lub 2.2).

Kary: Do 100 000 EUR w niektórych krajach.

USA (ADA Compliance)

Setki pozwów rocznie przeciwko firmom z niedostępnymi stronami (Domino's Pizza przegrała sprawę w 2019).

Polska

Ustawa o dostępności cyfrowej (2019) – dotyczy głównie podmiotów publicznych, ale trend idzie w kierunku prywatnych firm.

Case Study: E-commerce accessibility

Firma: Sklep odzieżowy (50k wizyt/miesiąc)
Problem: 12% użytkowników porzucało checkout (brak accessibility)

Co naprawiliśmy:

  1. Kontrast przycisków (było 2.8:1 → 4.7:1)
  2. Label na wszystkich inputach
  3. Keyboard navigation w formularzu
  4. Aria-live announcements dla błędów

Rezultat:

  • Bounce rate na checkout: -23%
  • Konwersja: +1.2 p.p.
  • 0 skarg na niedostępność

Checklist WCAG 2.2 AA

✅ ALT text na wszystkich obrazach
✅ Kontrast min. 4.5:1 (tekst vs tło)
✅ Struktura headings (H1→H2→H3, bez skipów)
✅ Keyboard navigation (focus visible)
✅ Formularze z label + error messages
✅ Aria attributes (gdzie potrzebne)
✅ Target size min. 24x24px
✅ Skip to content link
✅ No auto-play video/audio
✅ Captions na video

Podsumowanie

Accessibility to inwestycja, która się zwraca – w SEO, konwersji, i po prostu w byciu dobrą firmą. W Netova każdy projekt testujemy pod kątem WCAG 2.2 AA. To standard, nie opcja.

Sprawdź swoją stronę

← Wróć do listy artykułów