Wróć do wszystkich kryteriów

2.5.7 Ruchy przeciągania (ang.) Dragging Movements

Specjalizacje:

  • Deweloper

Elementy:

  • Dialogi i warstwy
  • Przyciski i kontrolki

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Kryterium to nakłada obowiązek zapewnienia alternatywnego sposobu obsługi dla wszystkich funkcjonalności, które domyślnie wymagają od użytkownika wykonania ruchu przeciągania. Alternatywa ta musi być realizowana za pomocą pojedynczego wskazania (np. pojedynczego kliknięcia lub tapnięcia), chyba że przeciąganie jest absolutnie niezbędne dla zachowania sensu danej funkcji.

    O ile kryterium 2.5.1 Gesty Wskaźnika skupiało się na złożonych gestach opartych na ścieżce (np. uszczypnięcie), 2.5.7 koncentruje się na konkretnych ruchach przeciągania, które są często używane do przenoszenia elementów lub obsługi suwaków.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#dragging-movements

    Słownik pojęć

    Ruch przeciągania (ang.) dragging movement
    –

    operacja interfejsu, w której wskaźnik wchodzi w interakcję z elementem w momencie zdarzenia naciśnięcia ((ang.) down-event), a dany element (lub wizualna reprezentacja jego pozycji) podąża za wskaźnikiem aż do momentu zdarzenia zwolnienia nacisku ((ang.) up-event).

    Wpływ na dostępność (Kogo wspierasz?)

    • Użytkownicy alternatywnych urządzeń wskazujących: Osoby korzystające z systemów sterowania wzrokiem, wskaźników nagłownych, trackballi czy emulatorów myszy sterowanych mową. Urządzenia te często symulują wyłącznie pojedyncze tąpnięcia, przez co ciągłe przeciąganie elementów z jednoczesnym przytrzymaniem przycisku jest na nich barierą nie do przebicia.
    • Osoby z trwałymi ograniczeniami motorycznymi: Osoby zmagające się z silnym drżeniem rąk (np. w chorobie Parkinsona), spastycznością mięśniową czy ograniczoną koordynacją ruchową. Zapewnienie alternatywy w postaci pojedynczego kliknięcia pozwala im na stabilną, bezbłędną i w pełni samodzielną obsługę elementów interfejsu.
    • Osoby starsze (Seniorzy): Naturalny proces starzenia przynosi spadek precyzji motorycznej, lekkie (często niezdiagnozowane medycznie) drżenie dłoni oraz mniejszą elastyczność stawów. Seniorzy rzadko definiują siebie jako osoby z niepełnosprawnością, ale jednoczesne trzymanie i przesuwanie obiektów na ekranie smartfona sprawia im ogromną trudność. Proste, duże przyciski przywracają im komfort obsługi.
    • Osoby z niepełnosprawnościami czasowymi i sytuacyjnymi: Pomyśl o użytkowniku, który ma rękę w gipsie, nosi sztywną ortezę nadgarstka lub mocno skaleczył palec wskazujący. W takich sytuacjach człowiek zmuszony jest do korzystania z myszy lub ekranu dotykowego za pomocą ręki niedominującej. Wykonanie precyzyjnej ścieżki przeciągnięcia staje się wtedy wyzwaniem, podczas gdy pojedyncze tąpnięcie natychmiast rozwiązuje problem.
    • Użytkownicy obsługujący urządzenie mobilne w ruchu: To potężny zysk z obszaru UX ((ang.) User Experience) dla każdego człowieka. Osoby jadące zatłoczonym, gwałtownie hamującym autobusem, trzymające się jedną ręką barierki, a drugą próbujące obsłużyć telefon (np. zmienić kolejność utworów na playliście), precyzyjne przeciąganie kciukiem często kończy się błędem i zrzuceniem elementu w złe miejsce. Możliwość kliknięcia w cel drastycznie zmniejsza irytację i podnosi komfort obsługi w trudnym otoczeniu.

    Zasady wdrażania i wymagania techniczne

    • Zapewnij ekwiwalentną funkcjonalność: Metoda alternatywna musi pozwalać na osiągnięcie dokładnie tego samego celu biznesowego lub funkcjonalnego (np. zmiana statusu zadania, zmiana wartości suwaka), co gest przeciągania.
    • Wprowadź przyciski kierunkowe lub akcji: Przy sortowaniu list lub tablic typu Kanban, oprócz mechanizmu przeciągnij i upuść ((ang.) Drag and Drop), dodaj widoczne przyciski (np. strzałki „Przenieś w górę” / „Przenieś w dół” lub menu kontekstowe z listą docelowych kolumn), które wykonają tę akcję po pojedynczym kliknięciu.
    • Wykorzystaj pola tekstowe i klikalne osie przy suwakach: Jeśli stosujesz suwak zakresu ((ang.) range slider), umożliw użytkownikowi kliknięcie lub tapnięcie w dowolne miejsce na osi suwaka, aby automatycznie przenieść tam znacznik. Dodatkowo, umieszczenie obok pola tekstowego typu <input type="number"> pozwala na wpisanie dokładnej wartości bez konieczności przeciągania.
    • Niezależność od dostępności klawiatury: Spełnienie kryteriów dotyczących klawiatury (2.1.1 i 2.1.3) nie oznacza automatycznego spełnienia kryterium 2.5.7. Alternatywa dla przeciągania musi być fizycznie operowalna za pomocą wskaźnika (myszy/dotyku) poprzez pojedyncze kliknięcia.
    • Odróżniaj przeciąganie od gestów opartych na ścieżce: Kryterium to dotyczy ogólnego ruchu przemieszczania elementów, gdzie kierunek ruchu w trakcie nie ma znaczenia, a liczy się punkt startowy i końcowy. Jeśli interfejs wymaga precyzyjnego poruszania się po wyznaczonej ścieżce (np. labirynt lub weryfikacja (ang.) CAPTCHA), weryfikuj kod również pod kątem kryterium 2.5.1 (Gesty wskaźnika).

    Wyjątki i sytuacje szczególne

    Wymóg zapewnienia alternatywy za pomocą pojedynczego wskazania nie obowiązuje w następujących przypadkach:

    • Gdy przeciąganie jest niezbędne ((ang.) essential): Sytuacja, w której usunięcie ruchu przeciągania całkowicie zmieniłoby sens bądź uniemożliwiło realizację danej funkcji, a celu nie da się osiągnąć w żaden inny sposób zgodny z wytycznymi (np. odręczne rysowanie, malowanie cyfrowe czy precyzyjne modyfikowanie krzywych graficznych).
    • Mechanizmy natywne dla programu narzędziowego ((ang.) User Agent): Wytyczna nie dotyczy przewijania stron (skrolowania) za pomocą paska przewijania przeglądarki lub gestu przesunięcia palcem po ekranie dotykowym smartfona. Dotyczy to również sytuacji, gdy używasz stylów CSS (np. overflow: scroll) do tworzenia przewijanych obszarów – mechanizmem przewijania zarządza wtedy przeglądarka, a nie skrypt autora strony. Kryterium ma zastosowanie tylko wtedy, gdy autor celowo zablokuje natywne przewijanie i wdroży własny, niestandardowy skrypt do poruszania zawartością.

    Przykłady Implementacji

    Najczęstsze błędy

    • F108: Całkowite zaniechanie wdrożenia alternatywnej metody obsługi interfejsu opartej na pojedynczym kliknięciu lub dotknięciu, przez co funkcjonalność (np. interaktywna mapa, sortowanie elementów) staje się dostępna wyłącznie dla osób mogących fizycznie przeciągać obiekty.
    • Zepchnięcie alternatywy do głębokiego, nieintuicyjnego podmenu: Ukrycie przycisków sterujących lub pól wyboru tak głęboko w strukturze serwisu, że użytkownik musi wykonać nieproporcjonalnie wiele kroków, aby odnaleźć ekwiwalentną funkcję.
    • Zaoferowanie nieefektywnej metody zastępczej: Wdrożenie alternatywy, która w praktyce działa wadliwie, nie pozwala na osiągnięcie identycznego rezultatu końcowego lub drastycznie ogranicza zakres dostępnych opcji interakcji.
    • Nadpisanie i zablokowanie natywnego przewijania przeglądarki: Celowe zablokowanie domyślnego mechanizmu skrolowania strony i zastąpienie go własnym skryptem interpretującym przeciąganie, bez zapewnienia klikalnych elementów sterujących dla tego obszaru.

    Najlepsze praktyki

    • Stosuj widoczne i jasne podpowiedzi wizualne: Zmieniaj wygląd kursora myszy przy najechaniu na element przeciągany (np. cursor: grab, a podczas ruchu cursor: grabbing), wyraźnie podświetlaj strefy upuszczenia elementu i stosuj płynne animacje potwierdzające wykonanie akcji.
    • Dostarczaj przejrzyste instrukcje i podpowiedzi: Informuj użytkowników o istnieniu alternatywnych metod za pomocą krótkich tekstów pomocy, etykiet, opisów dostępności lub dymków podpowiedzi ((ang.) tooltips).
    • Zadbaj o perfekcyjną responsywność interfejsu: Weryfikuj, czy alternatywne kontrolki (takie jak przyciski i strzałki) są odpowiednio duże, łatwe do naciśnięcia na ekranach urządzeń mobilnych oraz czy nie nakładają się na inne elementy interfejsu.
    • Testuj rozwiązania z użytkownikami: Przeprowadzaj testy użyteczności z udziałem osób z różnymi formami niepełnosprawności motorycznych i użytkownikami technologii wspomagających, aby upewnić się, że zaprojektowana alternatywa jest dla nich wygodna.

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Przeanalizuj strukturę drzewa DOM i podpięte zdarzenia JavaScript. Upewnij się, że elementy obsługujące zaawansowane gesty mają zdublowane alternatywne kontrolki (np. przyciski) reagujące na standardowe kliknięcia, a elementy te posiadają poprawne etykiety dostępności.
    • NVDA: Uruchom czytnik ekranu i manualnie spróbuj wywołać funkcję przypisaną pierwotnie do gestu (np. powiększenie mapy), nawigując wyłącznie do alternatywnych przycisków, aby upewnić się, że operacja jest w pełni dostępna bez patrzenia na ekran.
    • Narzędzie deweloperskie (ang.) Developer Tools: Przeanalizuj kod i strukturę drzewa DOM. Upewnij się, że alternatywne elementy sterujące (przyciski, linki, pola formularzy) są poprawnie osadzone w kodzie, nie są ukryte za pomocą stylów CSS (display: none lub visibility: hidden) i są w pełni widoczne dla użytkownika.
    • NVDA: Uruchom czytnik ekranu i przetestuj nawigację za pomocą klawisza Tabulator. Zweryfikuj, czy alternatywne kontrolki przyjmują fokus, są poprawnie odczytywane oraz czy posiadają zrozumiałe etykiety tekstowe (np. za pomocą atrybutu aria-label="Przenieś element do kolumny Zrobione").
    • Testowanie manualne wskaźnikiem: Spróbuj wykonać wszystkie zadania w interfejsie (np. przestawienie wartości, przesunięcie elementu na tablicy) przy użyciu myszy lub ekranu dotykowego, wykonując wyłącznie pojedyncze, niezależne od siebie kliknięcia lub tapnięcia, bez wykonywania jakichkolwiek ruchów przesunięcia wskaźnika przy wciśniętym przycisku.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 4 moduły interfejsu, w których wykorzystano mechanikę przeciągania (Drag and Drop / Sliders). Twoim zadaniem jest sprawdzenie, czy każdy z nich posiada w pełni funkcjonalną alternatywę pozwalającą osiągnąć ten sam efekt za pomocą pojedynczych kliknięć (tapnięć).

    Jak to sprawdzić?

    1. Spróbuj obsłużyć dany komponent wyłącznie klikając (bez przytrzymywania i przesuwania myszy/palca).
    2. Sprawdź, czy obok przeciąganych elementów znajdują się widoczne przyciski (np. strzałki w górę/dół) lub powiązane pola tekstowe.
    3. Zastanów się, czy dany element nie jest przypadkiem wyjątkiem („Essential”), w którym przeciąganie stanowi fundament jego działania.

    Notatka: Zanim zajrzysz do rozwiązania, przetestuj i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Klawiatura (Tab, Enter, Spacja)

    Link: https://pdc.ambiscale.com/training/wcag-2-5-7/

    #1 DOBRZE

    Dlaczego: Suwak (range slider) sam w sobie często pozwala na kliknięcie w wybrane miejsce na osi. Co jednak najważniejsze w kontekście tego kryterium, powiązane pole <input type="number"> posiada wbudowane małe strzałki (spinnery). Użytkownik może po prostu wielokrotnie klikać w te strzałki (pojedyncze tapnięcia), aby precyzyjnie zmieniać wartość bez ruchu przeciągania. Możliwość wpisania wartości z klawiatury to świetne udogodnienie, ale pamiętaj: samo wsparcie klawiatury nie spełnia wymogów 2.5.7 – musi istnieć alternatywa klikalna dla wskaźnika (myszy/dotyku)!

    #2 BŁĄD

    Problem: Sortowanie zadań na liście wymaga złapania elementu (ikona ☰) i przeciągnięcia go w inne miejsce. Brakuje jakichkolwiek widocznych przycisków typu „W górę / W dół” lub menu „Przenieś do”.
    Dlaczego: Błąd opisany techniką F108. Osoby używające oprogramowania śledzącego wzrok nie są w stanie wykonać operacji przeciągania. Funkcja zmiany kolejności jest dla nich całkowicie zablokowana.
    Naprawa: Należy dodać do każdego elementu listy małe, klikalne przyciski strzałek (▲ / ▼), które po pojedynczym kliknięciu przesuną element w strukturze.

    #3 DOBRZE

    Dlaczego: Mapa domyślnie jest obsługiwana za pomocą chwytania i przeciągania obszaru (panning). Jednakże w prawym dolnym rogu umieszczono czytelne przyciski kierunkowe. Użytkownik, który nie potrafi przeciągać obiektów, może bezpiecznie nawigować po mapie wykonując serię pojedynczych kliknięć w przyciski (← / →). Alternatywa jest w pełni widoczna i funkcjonalna.

    #4 DOBRZE

    Dlaczego: Aplikacja wymaga złożenia odręcznego podpisu cyfrowego na płótnie (canvas). Ta czynność z definicji opiera się na wykonywaniu swobodnych ścieżek rysowania. Dodanie przycisku „Kliknij, aby podpisać” zniszczyłoby autentyczność podpisu odręcznego. Przeciąganie jest tu zdefiniowane jako „Essential” (niezbędne) i wyłączone z wymogów kryterium 2.5.7.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów