Nowości w wersji 2.2: wygląd fokusu i rozmiar celu
Zastosuj kryteria wprowadzone w najnowszej wersji.
Nowości w wersji 2.2: wygląd fokusu i rozmiar celu to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co wprowadzono w wersji 2.2
WCAG 2.2 dodało w 2023 roku dziewięć nowych kryteriów sukcesu. Dwa najbardziej praktyczne w codziennych interfejsach to Focus Appearance i Target Size.
Fokus niezasłonięty
Nowa zasada 2.4.11 (Focus Not Obscured) na poziomie AA mówi, że element z fokusem nie może być całkowicie zasłonięty przez przyklejone nagłówki ani paski z informacjami o cookies.
Dlaczego zasłonięty fokus jest problemem
Jeśli przyklejony baner zasłania element sterujący z fokusem, użytkownicy klawiatury tracą orientację. Muszą widzieć element, do którego właśnie przeszli klawiszem Tab.
Wygląd fokusu na poziomie AAA
Kryterium 2.4.13 (Focus Appearance) należy do poziomu AAA. Określa minimalny obszar wskaźnika i kontrast 3:1, aby obramowanie fokusu było jednoznacznie widoczne.
Rozmiar celu (minimum)
Zasada AA 2.5.8 (Target Size Minimum) wymaga, aby cele dotykowe miały co najmniej 24 na 24 piksele CSS albo odpowiednio dużo wolnego miejsca wokół siebie.
Dlaczego 24 piksele
Małe cele są trudne do trafienia dla osób z drżeniem rąk lub dużymi palcami. Minimum 24px ogranicza przypadkowe dotknięcia bez wymuszania masywnego projektu w całym interfejsie.
Wyjątek dotyczący odstępów
Cel mniejszy niż 24px nadal może spełniać wymagania, jeśli okrąg o średnicy 24px, którego środek pokrywa się ze środkiem celu, nie nachodzi na sąsiedni element. Odpowiedni odstęp rekompensuje mniejszy rozmiar.
Ustalanie rozmiaru celu w CSS
Małym przyciskom należy nadać rzeczywisty minimalny rozmiar, aby z zapasem spełniały wymaganie 24px.
button {
min-width: 24px;
min-height: 24px;
}Odnośniki w tekście są wyłączone
Odnośniki znajdujące się w zdaniu są wyłączone z wymagania 2.5.8, ponieważ powiększanie ich kosztem zmniejszania tekstu pogorszyłoby komfort czytania.
Spójna pomoc: 3.2.6
Inne wymaganie dodane w wersji 2.2, 3.2.6 (Consistent Help) na poziomie A, zapewnia, że odnośniki do pomocy i dane kontaktowe znajdują się w tym samym względnym miejscu na różnych stronach.
Redundantne wprowadzanie danych: 3.3.7
Kryterium 3.3.7 (Redundant Entry) na poziomie A mówi, aby nie zmuszać użytkowników do ponownego wpisywania informacji, które już podali, chyba że jest to niezbędne, jak w przypadku hasła.
Szybkie sprawdzenie
Proszę przypomnieć sobie minimalny rozmiar celu dotykowego według WCAG 2.2.
Podsumowanie: dodatki w wersji 2.2
W wersji 2.2 dodano zasady dotyczące fokusu i celów: fokus ma być widoczny, cele mają mieć 24px lub odpowiednie odstępy, a zbędne ponowne wprowadzanie danych należy wyeliminować. Dalej: przeciąganie i uwierzytelnianie. 🎯
Często zadawane pytania
Czy lekcja „Nowości w wersji 2.2: wygląd fokusu i rozmiar celu” jest bezpłatna?
Tak — pełny tekst „Nowości w wersji 2.2: wygląd fokusu i rozmiar celu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Nowości w wersji 2.2: wygląd fokusu i rozmiar celu”?
Zastosuj kryteria wprowadzone w najnowszej wersji. Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Nowości w wersji 2.2: wygląd fokusu i rozmiar celu”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- A, AA, AAA: wybór właściwego poziomu
- Nowości w wersji 2.2: wygląd fokusu i rozmiar celu
- Ruchy przeciągania i uwierzytelnianie dostępne
- Tworzenie uzasadnionej deklaracji zgodności