ui-testing

Umiejętność do szybkiej weryfikacji interfejsów użytkownika pod kątem standardów dostępności. Po utworzeniu nowych komponentów UI uruchom listę kontrolną, aby upewnić się, że przyciski są widoczne, tekst ma wystarczający kontrast (4.5:1), docelowe obszary kliknięcia mają minimum 44px, a stany interakcji (hover, focus, disabled) są wyraźnie zaznaczone. Zawiera konkretne kombinacje kolorów Tailwind, które spełniają wymogi dostępności w trybie jasnym i ciemnym, oraz linki do narzędzi online do sprawdzania kontrastu.

1. Załaduj umiejętność razem z ui-web.md lub ui-mobile.md, w zależności od tego, czy testujesz interfejs webowy czy mobilny. 2. Po utworzeniu nowego komponentu UI otwórz listę kontrolną z umiejętności i przejdź przez każdą sekcję: widoczność przycisków, rozmiary obszarów kliknięcia (minimum 44px), stany interakcji (hover, focus, disabled, loading) oraz tryb ciemny, jeśli dotyczy. 3. Aby sprawdzić kontrast tekstu, kliknij prawym przyciskiem myszy na element w przeglądarce, wybierz Inspect, przejdź do panelu Styles i kliknij wartość koloru – poszukaj wskaźnika współczynnika kontrastu (musi być ✓ dla AA, czyli 4.5:1 dla tekstu). 4. Jeśli pracujesz z Tailwind, skorzystaj z gotowych kombinacji kolorów z umiejętności (np. text-gray-900 na białym tle = 16:1, text-gray-400 = FAIL). 5. W razie wątpliwości użyj zewnętrznych narzędzi: WebAIM Contrast Checker lub Coolors Contrast Checker, aby zweryfikować współczynnik kontrastu. 6. Zaznacz wszystkie pozycje na liście kontrolnej przed wysłaniem UI do produkcji.