Zasada Funkcjonalności - WCAG 2.1 i 2.2

1. Klawiatura - Nawigacja po Stronie Używając Tylko Klawiatury (WCAG 2.1 - 2.1.1, 2.1.2, 2.1.4)

Użytkownicy powinni mieć możliwość nawigacji po stronie używając tylko klawiatury, poprzez:

• Klawisze: , , , , , , , , , , ,

Kolejność tabulacji musi być logiczna i zgodna z wizualną kolejnością elementów:

Atrybut

określa, czy element może być fokusowany i w jakiej kolejności:

• Wartość ujemna: element jest fokusowalny, ale nie przez sekwencyjną nawigację klawiaturową
• 0: element jest fokusowalny i osiągalny w kolejności domyślnej
• Wartość dodatnia: element jest fokusowalny w kolejności numerycznej (nie zalecane)

Elementy z dodatnimi wartościami są umieszczane na początku kolejności tabulacji, co może zaburzać logiczną nawigację.

Przykład prawidłowego użycia :

Przykład online: CodePen

2. Obsługa Fokusa (WCAG 2.1 - 2.4.7, WCAG 2.2 - 2.4.13)

Menu Hamburgerowe

Problem "pustych" tabulacji można rozwiązać za pomocą atrybutu :

• Podejście Google: YouTube
• Skrypt: GitHub

Widoczność Fokusa

WCAG 2.1 (2.4.7): Fokus musi być widoczny na elementach interaktywnych.

WCAG 2.2 (2.4.13 Focus Appearance - nowy): Wprowadza bardziej szczegółowe wymagania:

• Obszar fokusa musi mieć minimalny kontrast 3:1 względem tła
• Obszar fokusa musi mieć co najmniej 2px grubości
• Fokus nie może być całkowicie zakryty przez inne elementy
• Cały obszar fokusa musi być widoczny dla użytkownika

Przykład podstawowego stylu fokusa:

Obsługa Modali i Dialogów

Dla modali i okien dialogowych:

• Fokus powinien przenosić się automatycznie do pierwszego interaktywnego elementu w modalu
• Fokus powinien być zamknięty w obrębie modala (trap focus)
• Użytkownik musi mieć możliwość zamknięcia modala za pomocą:
  • Klawisza
  • Przycisku zamknięcia

3. Nawigacyjność (WCAG 2.1 - 2.4.1, 2.4.2, 2.4.6)

Skip Linki

Link pozwalający przejść bezpośrednio do głównej treści (pomijając nawigację):

Przykład: CodePen

Tytułowanie Stron

Hierarchia Nagłówków

• Tylko jeden główny nagłówek na stronie
• Zachowanie hierarchii nagłówków (h1 → h2 → h3 itd.)
• Nagłówki powinny zawierać znaczącą treść

Opisowe Linki

Tekst linku powinien jasno wskazywać jego cel:

Informacje o Lokalizacji (AAA)

• Okruszki (breadcrumbs)
• Mapa strony

4. Metody Wprowadzania Danych (WCAG 2.1 - 3.3.2, 4.1.2)

Etykiety Formularzy

Etykiety powinny być jasne i powiązane z polami formularza:

Dostępne Nazwy dla Elementów Interaktywnych

Dostępna nazwa musi zawierać widoczny tekst:

Dla ukrywania tekstu, który ma być dostępny dla czytników ekranu:

Grupowanie Powiązanych Elementów

5. Nowe Wymagania w WCAG 2.2

2.5.7 Dragging Movements (AA)

Wszystkie funkcje wymagające przeciągania muszą mieć alternatywę klawiaturową:

2.5.8 Target Size (minimum) (AA)

Cele dotykowe muszą mieć co najmniej 24x24 piksele (z wyjątkami):

3.2.6 Consistent Help (A)

Funkcje pomocy (kontakt, wsparcie) muszą być w tym samym miejscu na wszystkich stronach:

3.3.7 Redundant Entry (A) i 3.3.9 (AAA)

Użytkownicy nie powinni wprowadzać tych samych danych wielokrotnie:

3.3.8 Accessible Authentication (AA)

Uwierzytelnianie musi być możliwe bez testów poznawczych:

• Należy oferować alternatywy dla CAPTCHA

Podsumowanie

Prawidłowa implementacja zasad dostępności WCAG 2.1 i 2.2 wymaga kompleksowego podejścia koncentrującego się na:

1. Pełnej dostępności z klawiatury
2. Widocznym fokusie z odpowiednim kontrastem
3. Logicznej strukturze dokumentu
4. Jasnych i powiązanych etykietach
5. Alternatywnych metodach interakcji

Dobrą praktyką jest testowanie stron ze screenreaderami (NVDA, JAWS, VoiceOver) oraz wyłącznie za pomocą klawiatury.