Funkcjonalność · Poziom A

2.5.2 Anulowanie wskazania

Użytkownik powinien móc wycofać przypadkowe kliknięcie lub dotknięcie.

Krótko

Akcja uruchamiana myszą, dotykiem albo rysikiem nie powinna wykonywać się już przy naciśnięciu. Najbezpieczniej uruchamiać ją dopiero przy puszczeniu i pozwolić użytkownikowi wycofać wskaźnik poza element.

Problem w praktyce

Użytkownik przypadkowo dotyka przycisku „Usuń konto”. Jeśli akcja wykonuje się już w chwili dotknięcia ekranu, nie ma czasu na wycofanie palca. Przy typowym przycisku akcja dzieje się po puszczeniu, a użytkownik może odsunąć palec poza przycisk, żeby jej nie wykonać.

To kryterium nie jest tym samym co potwierdzanie błędów formularzy. Chodzi o mechanikę wskaźnika: kiedy akcja się uruchamia i czy można ją anulować.

Kogo to dotyczy

  • Osób z drżeniem rąk albo ograniczoną precyzją ruchu.
  • Osób korzystających z ekranu dotykowego, rysika lub alternatywnego wskaźnika.
  • Użytkowników urządzeń mobilnych w ruchu.
  • Osób, które potrzebują czasu, żeby skorygować przypadkowy ruch.

Dobry przykład

  • Przycisk wykonuje akcję po puszczeniu wskaźnika nad przyciskiem.
  • Gdy użytkownik przytrzyma i odsunie palec poza przycisk, akcja się nie wykona.
  • Przeciąganie można anulować przez puszczenie poza obszarem docelowym.
  • Po przypadkowej akcji dostępne jest szybkie „Cofnij”.

Zły przykład

  • Akcja usunięcia uruchamia się już przy pointerdown.
  • Dotknięcie przycisku natychmiast wysyła formularz, bez możliwości wycofania.
  • Przeciągnięcie elementu nie da się przerwać i zawsze kończy akcję.
  • Jedno przypadkowe stuknięcie wykonuje nieodwracalną akcję.

Przykłady kodu

Dobry przykład: natywny przycisk

Natywny przycisk ma przewidywalne zachowanie dla myszy, dotyku i klawiatury.

Kod — HTML

<button type="button">
  Usuń załącznik
</button>

Zły przykład: akcja na zdarzeniu down

Akcja wykonuje się za wcześnie, zanim użytkownik może wycofać wskaźnik.

Kod — JavaScript

deleteButton.addEventListener("pointerdown", () => {
  deleteAttachment();
});

Dobry przykład: możliwość cofnięcia

Jeśli akcja jest szybka, użytkownik dostaje mechanizm odwrócenia skutku.

Kod — HTML

<p>Załącznik usunięty.</p>
<button type="button">Cofnij usunięcie</button>

Przykład graficzny

Źle

Dotknięcie w dół → akcja wykonana

Nie ma momentu na wycofanie palca lub kursora.

Dobrze

Dotknięcie → odsuń poza przycisk → brak akcji

Użytkownik może anulować przypadkowe wskazanie.

Schemat pokazuje różnicę między uruchomieniem na naciśnięciu a uruchomieniem po bezpiecznym puszczeniu.

Jak sprawdzić

  1. Znajdź przyciski, linki, karty i elementy reagujące na mysz lub dotyk.
  2. Sprawdź, czy akcja wykonuje się dopiero po puszczeniu wskaźnika.
  3. Przytrzymaj wskaźnik na elemencie, odsuń go poza element i puść.
  4. Sprawdź, czy w takim scenariuszu akcja się nie wykona albo da się ją cofnąć.
  5. Osobno oceń akcje, które naprawdę muszą działać na naciśnięciu, np. klawiatura ekranowa.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • część obsługi pointerdown, mousedown lub touchstart,
  • niestandardowe kontrolki zamiast natywnych przycisków,
  • brak mechanizmu cofnięcia w prostych przypadkach.

Automat nie oceni pewnie

  • czy akcję można realnie anulować ruchem poza element,
  • czy uruchomienie na down-event jest istotne,
  • czy mechanizm cofnięcia jest wystarczająco dostępny i zrozumiały.

Typowe błędy

  • Usuwanie elementu na mousedown.
  • Karty otwierane już przy dotknięciu, bez możliwości wycofania.
  • Brak „Cofnij” po przypadkowym usunięciu.
  • Customowe kontrolki, które nie zachowują się jak natywne przyciski.