Przeciąganie elementów jest często wykorzystywanym mechanizmem interakcji: pozwala zmieniać kolejność pozycji, przenosić zadania między obszarami albo sterować wartością suwaka. Z perspektywy projektowej nie powinno być jednak jedyną drogą wykonania funkcji. Użytkownik może nie być w stanie wygodnie rozpocząć, utrzymać i zakończyć ruchu wskaźnika, dlatego interfejs powinien przewidywać alternatywę dla drag and drop.
W tym kontekście WCAG 2.2 wskazuje kryterium 2.5.7 Dragging Movements. Jego znaczenie wykracza poza samą estetykę komponentu. Dotyczy funkcji, procesu projektowego i sposobu weryfikacji wdrożenia. W artykule wyjaśniono, kiedy potrzebna jest alternatywna interakcja, jak projektować ją dla sortowania i suwaków, czym różni się od obsługi klawiaturą oraz jak uporządkować kontrolę interfejsu.
Dlaczego drag and drop wymaga alternatywy
Typowa operacja przeciągania składa się z kilku etapów: użytkownik wskazuje element, naciska, utrzymuje kontakt, przemieszcza wskaźnik po ekranie, a następnie zwalnia go w miejscu docelowym. Taki mechanizm może być wygodny, ale wymaga ciągłego utrzymywania kontaktu i kontroli toru ruchu. Jeżeli funkcja interfejsu opiera się na tej sekwencji, należy rozważyć sposób wykonania jej bez przeciągania.
WCAG 2.2, w kryterium sukcesu 2.5.7, wymaga, aby funkcja wykorzystująca przeciąganie mogła zostać wykonana za pomocą pojedynczego wskaźnika bez konieczności utrzymywania kontaktu i przemieszczania go po ekranie. Wymóg nie oznacza zakazu stosowania drag and drop. Oznacza konieczność zapewnienia równoważnej ścieżki, chyba że przeciąganie jest niezbędne dla danej funkcji albo działanie pozostaje pod kontrolą agenta użytkownika i nie zostało zmodyfikowane przez autora.
Od identyfikacji gestu do identyfikacji funkcji
Punktem wyjścia powinna być inwentaryzacja funkcji, a nie ocena samego wyglądu komponentu. Należy zidentyfikować sortowanie, przenoszenie między obszarami, zmianę wartości i inne działania, w których użytkownik musi nacisnąć, przytrzymać, przemieścić i zwolnić wskaźnik. Następnie trzeba sprawdzić, czy można osiągnąć ten sam rezultat poprzez pojedyncze aktywacje, wybór celu albo wprowadzenie wartości.
To rozróżnienie ma znaczenie także wtedy, gdy alternatywa znajduje się w innym komponencie na tej samej stronie. Nie musi kopiować wizualnie pierwotnego mechanizmu. Powinna jednak umożliwiać wykonanie tej samej funkcji. Ocena powinna dotyczyć konkretnego scenariusza, a nie prowadzić do deklaracji zgodności całej witryny na podstawie jednego elementu.
WCAG 2.5.7 a dostępność klawiaturowa
Dostępność klawiaturowa i alternatywa dla przeciągania są odrębnymi obszarami oceny. Kryteria dotyczące klawiatury odnoszą się do możliwości wykonania funkcji z użyciem klawiatury lub interfejsu klawiaturowego. Kryterium 2.5.7 stawia natomiast pytanie, czy funkcję można wykonać pojedynczym wskaźnikiem, na przykład poprzez kliknięcie lub dotknięcie, bez utrzymywania kontaktu i przemieszczania go po ekranie.
Sama obsługa klawiaturą nie zastępuje więc alternatywy dla przeciągania. Interfejs powinien być obsługiwalny z klawiatury, ale jeżeli jego funkcja wykorzystuje drag and drop, należy niezależnie sprawdzić także alternatywną metodę pointerową. Odwrotna zależność również nie występuje: możliwość wykonania operacji kliknięciami lub dotknięciami nie oznacza automatycznie, że działa ona z klawiatury.
Dwa kanały obsługi, dwa kryteria oceny
W praktyce warto rozdzielić testy na dwa kanały. Pierwszy obejmuje obsługę klawiaturą, w tym możliwość przejścia do kontrolki, uruchomienia jej i wykonania pełnej funkcji. Drugi dotyczy pojedynczego wskaźnika: użytkownik powinien móc wykonać operację bez przeciągania, w przewidywalnej sekwencji i z równoważnym rezultatem.
Takie rozdzielenie ogranicza ryzyko błędnego wniosku, że jedna forma obsługi kompensuje brak drugiej. Wynik kontroli powinien być przypisany do konkretnej funkcji i scenariusza. Ogólna obserwacja interfejsu, podobnie jak sam przegląd projektu wizualnego, nie jest wystarczającym audytem.
Wzorce alternatyw dla sortowania i drag and drop
Alternatywa dla drag and drop może składać się z kilku pojedynczych aktywacji. Istotne jest nie to, aby odtworzyć ruch przeciągania, lecz aby użytkownik mógł osiągnąć równoważny rezultat w sposób zrozumiały i przewidywalny. W3C wskazuje między innymi przyciski przesuwania elementów oraz wybór miejsca docelowego z listy.
Sortowanie list i przenoszenie między obszarami
W przypadku sortowania listy po aktywacji elementu można ujawnić przyciski przesuwania go w górę i w dół. Każda aktywacja wykonuje pojedynczy krok, dzięki czemu zmiana kolejności nie wymaga utrzymywania kontaktu ani przemieszczania wskaźnika. Innym rozwiązaniem jest wybór pozycji docelowej z listy lub menu.
Podobny model można zastosować w komponentach, w których element jest przenoszony między obszarami. Sekwencja może obejmować wybór elementu, wybór miejsca docelowego oraz potwierdzenie operacji, jeżeli jest ono potrzebne. Należy przy tym zadbać o jasne nazwy kontrolek, przewidywalny fokus i informację o zmianie położenia. Sam fakt zastosowania kilku kliknięć nie wystarcza, jeżeli użytkownik nie otrzymuje czytelnego potwierdzenia rezultatu.
Zasada równoważnej funkcji
Alternatywa nie musi wyglądać tak samo jak pierwotny komponent. Projekt powinien koncentrować się na funkcji: czy element został umieszczony w wybranym miejscu, czy kolejność została zmieniona i czy użytkownik może rozpoznać stan po operacji. Właśnie dlatego rozwiązanie umieszczone w innym komponencie na tej samej stronie może być właściwe, jeśli zapewnia równoważny rezultat.
Technika G219 jest przykładem sposobu spełnienia kryterium, a nie zamkniętym katalogiem dopuszczalnych implementacji. Nie należy wdrażać wzorca mechanicznie ani uznawać go za automatyczne potwierdzenie zgodności. Każde rozwiązanie wymaga oceny w kontekście konkretnej funkcji, jej stanów i informacji przekazywanych użytkownikowi.
Alternatywy dla suwaków i wartości sterowanych ruchem
Suwak jest komponentem, w którym przeciąganie uchwytu często służy do zmiany wartości. Alternatywą może być kliknięcie lub dotknięcie odpowiedniego miejsca na torze suwaka. W takim modelu użytkownik wskazuje wartość bez konieczności utrzymywania kontaktu i przesuwania uchwytu.
Jeżeli wymagana jest większa precyzja, można udostępnić pole tekstowe do wprowadzenia wartości. Jest to inny sposób wykonania tej samej funkcji i może uzupełniać obsługę toru suwaka. Wybór konkretnego rozwiązania powinien wynikać z kontekstu funkcji oraz sposobu, w jaki interfejs przedstawia zmianę wartości.
Precyzja wartości bez przeciągania uchwytu
Projektując taki komponent, należy osobno ocenić obsługę pojedynczym wskaźnikiem, dotykiem i klawiaturą. Nie należy zastępować przeciągania gestem przesunięcia palcem bez sprawdzenia, czy nowy mechanizm nie pozostaje gestem zależnym od toru ruchu. Zmiana jednego wymagającego gestu na inny nie rozwiązuje problemu automatycznie.
Weryfikacja powinna obejmować także informację o aktualnej wartości i jej zmianie. Alternatywa musi prowadzić do równoważnego rezultatu, a nie tylko uruchamiać część interakcji. Kliknięcie toru oraz pole tekstowe są wskazywanymi przez W3C możliwościami, lecz ich poprawność zależy od konkretnej implementacji.
Checklista audytu zgodności z WCAG 2.5.7
Kontrolę warto rozpocząć od pełnej listy funkcji wykorzystujących przeciąganie. Następnie każdą funkcję należy analizować osobno, przypisując wynik do konkretnego scenariusza. Takie podejście pozwala uniknąć zarówno pominięcia pojedynczego komponentu, jak i zbyt szerokiej deklaracji dotyczącej całej witryny.
Pytania kontrolne dla każdej funkcji
Dla każdej funkcji należy zadać następujące pytania:
- Czy istnieje równoważna metoda wykonania funkcji bez przeciągania?
- Czy alternatywa działa za pomocą pojedynczego kliknięcia lub dotknięcia, bez utrzymywania kontaktu i przemieszczania wskaźnika?
- Czy użytkownik osiąga ten sam rezultat, co przy pierwotnej operacji drag and drop?
- Czy alternatywa nie jest wyłącznie gestem zależnym od toru ruchu, takim jak przesunięcie palcem?
- Czy funkcja działa niezależnie z klawiatury, zgodnie z odrębnym zakresem oceny?
- Czy sprawdzono stany pośrednie, komunikaty, kolejność operacji, fokus oraz informacje o zmianie położenia lub wartości?
W3C wskazuje G219 jako przykładową technikę zapewnienia alternatywy oraz F108 jako przykład sytuacji, w której brak metody obsługiwanej pojedynczym wskaźnikiem prowadzi do niezgodności z kryterium 2.5.7. Materiały te pomagają uporządkować audyt, ale nie zastępują oceny konkretnego wdrożenia.
Test powinien obejmować urządzenia dotykowe i obsługę wskaźnikiem, a także klawiaturę jako osobny kanał. Ostateczna ocena zależy od implementacji, kontekstu funkcji i pełnego zakresu kryteriów WCAG. Sam przegląd projektu wizualnego nie wystarcza.
Ryzyka wdrożeniowe i zarządzanie komponentami
Alternatywne interakcje powinny być traktowane jako część komponentu, a nie jako poprawka dodana na końcu projektu. Jeżeli funkcja sortowania, przenoszenia lub zmiany wartości jest opisana wyłącznie przez pryzmat drag and drop, ryzyko pominięcia alternatywy pozostaje wysokie. Odpowiedzialność za interakcję powinna być widoczna w specyfikacji UX/UI i w procesie odbioru wdrożenia.
Warto dokumentować stany komponentu, kolejność operacji, nazwy kontrolek, sposób działania fokusu oraz informacje o zmianie położenia lub wartości. Po aktualizacji serwisu albo komponentu należy ponownie sprawdzić wszystkie te elementy. Techniki WCAG powinny służyć jako przykłady i punkt odniesienia, nie jako zamknięta lista implementacji.
Dostępność jako część procesu wdrożeniowego
Najbezpieczniejszy model zarządzania zakłada przypisanie alternatywy do konkretnej funkcji i scenariusza. W dokumentacji komponentu należy opisać zarówno podstawowy mechanizm, jak i sposób wykonania tej samej operacji bez przeciągania. Po zmianach trzeba ponownie ocenić stany pośrednie, komunikaty, fokus oraz zachowanie na urządzeniach dotykowych.
Takie podejście nie pozwala automatycznie zadeklarować pełnej zgodności całej witryny, ale porządkuje odpowiedzialność za interakcję. Ogranicza również ryzyko, że zmiana wizualna lub aktualizacja komponentu usunie wcześniej dostępną ścieżkę obsługi. Wynik powinien zawsze odnosić się do konkretnego wdrożenia, funkcji i scenariusza.
Alternatywa dla drag and drop jest elementem świadomego projektowania interakcji, a nie dodatkiem do gotowego interfejsu. Każda funkcja oparta na przeciąganiu powinna zostać sprawdzona pod kątem równoważnej obsługi pojedynczym wskaźnikiem bez przeciągania. Równolegle należy testować klawiaturę, ponieważ jest to odrębny obszar dostępności. W przypadku sortowania pomocne mogą być przyciski przesuwania lub wybór pozycji docelowej, a przy suwakach kliknięcie toru albo pole tekstowe. Ostateczny rezultat zależy od implementacji, stanów i scenariuszy. Umów konsultację z BrandingHouse, aby stworzyć spójny wizerunek marki i materiały dopasowane do celów Twojej firmy.
