Dostępność i mobile
Zasady dostępności (WCAG) i projektowania mobilnego. Inkluzywny design dla wszystkich użytkowników i urządzeń.
Wszystkie zasady
WCAG (Web Content Accessibility Guidelines) WCAG (Web Content Accessibility Guidelines)
WCAG to międzynarodowy standard dostępności cyfrowej, który definiuje cztery zasady: percepcyjność, funkcjonalność, zrozumiałość i solidność. Spełnienie WCAG 2.1 AA oznacza, że Twój produkt jest dostępny dla osób z niepełnosprawnościami wzroku, słuchu, ruchu i poznawczymi.
Kontrast i czytelność Color Contrast and Readability
Minimalny kontrast tekstu do tła wynosi 4.5:1 dla normalnego tekstu i 3:1 dla dużego (18px+ bold lub 24px+). Zbyt niski kontrast sprawia, że tekst jest nieczytelny na słabszych ekranach, w słońcu lub dla osób z zaburzeniami widzenia.
Nawigacja klawiaturą Keyboard Navigation
Każdy element interaktywny musi być osiągalny i obsługiwalny wyłącznie klawiaturą (Tab, Enter, Space, Escape, strzałki). Dotyczy to nie tylko osób korzystających z czytników ekranu, ale też power userów, osób z dysfunkcją ruchu i użytkowników bez myszy.
Screen readery i semantyczny HTML Screen Readers and Semantic HTML
Screen readery czytają stronę na podstawie semantyki HTML, nie wyglądu. Nagłówki (h1-h6) tworzą strukturę, buttony są interaktywne, aria-label opisuje elementy bez tekstu. Div ze stylem przycisku wygląda tak samo, ale screen reader go nie odczyta jako przycisk.
Responsywność Responsive Design
Interfejs powinien dostosowywać się do rozmiaru ekranu bez utraty funkcji i czytelności. Responsywność to nie tylko zmiana szerokości kolumn. To zmiana nawigacji (hamburger na mobile), wielkości celów dotykowych, kolejności elementów i sposobu prezentacji danych.
Rozmiar celów dotykowych Touch Targets
Minimalna wielkość elementu dotykowego na urządzeniach mobilnych to 44x44px (Apple) lub 48x48dp (Google Material). Mniejsze przyciski powodują błędne kliknięcia, frustrację i porzucanie zadań. Dotyczy to przycisków, linków, checkboxów i ikon.
Przewidywalne gesty mobilne Predictable Mobile Gestures
Gesty mobilne (swipe, pinch, long press) powinny robić to, czego użytkownik oczekuje. Swipe w lewo na liście powinien ujawnić akcje (usuń, archiwizuj), a nie nawigować do innego ekranu. Gesty powinny być spójne z konwencjami platformy i nie powinny być jedynym sposobem interakcji.
Spójność z platformą Platform Consistency (iOS/Android)
Użytkownicy iOS oczekują innej nawigacji niż użytkownicy Androida. Na iOS 'wstecz' jest w lewym górnym rogu, na Androidzie jest fizyczny/systemowy przycisk. Przycisk 'OK' na iOS jest po prawej, na Androidzie po prawej lub po lewej, zależnie od wersji Material.