Funkcjonalność · Poziom AA

2.5.7 Ruch przeciągania

Akcje wymagające przeciągania, na przykład zmiany kolejności, muszą dać się wykonać także przyciskami albo inną metodą niewymagającą przeciągania.

Krótko

Jeśli użytkownik ma coś przeciągnąć, powinien dostać prostszy sposób wykonania tej samej czynności, np. przyciski, listę wyboru, menu akcji albo pole wartości.

Problem w praktyce

Przeciąganie bywa wygodne, ale wymaga przytrzymania wskaźnika, przesunięcia go po określonej ścieżce i puszczenia w odpowiednim miejscu. Dla części osób to jest trudne albo niemożliwe, nawet jeśli mogą kliknąć lub stuknąć pojedynczy przycisk.

Problem pojawia się, gdy sortowanie elementów działa tylko przez drag and drop, kolejność kart można zmienić wyłącznie przeciąganiem, zakres wybiera się tylko uchwytami suwaka, lokalizację ustawia się tylko przez przesuwanie pinezki na mapie, a plik można dodać wyłącznie przez przeciągnięcie do strefy.

2.5.7 nie zakazuje przeciągania. Wymaga alternatywnej drogi wykonania tej samej funkcji bez ruchu przeciągania, chyba że przeciąganie jest istotą funkcji albo działanie należy do wyjątków WCAG.

Kogo to dotyczy

  • Osób z ograniczeniami motorycznymi, które mają trudność z precyzyjnym przytrzymaniem i przesunięciem wskaźnika.
  • Osób z drżeniem rąk, bólem, osłabieniem albo ograniczoną sprawnością dłoni.
  • Osób korzystających z przełączników, wskaźników głowy, sterowania głosem albo innych alternatywnych urządzeń wejścia.
  • Osób używających ekranu dotykowego w trudnych warunkach, np. w ruchu albo jedną ręką.
  • Użytkowników, którzy mogą kliknąć lub stuknąć, ale nie mogą wykonać ciągłego ruchu przeciągania.

Dobry przykład

Interfejs może nadal obsługiwać drag and drop, ale obok niego pokazuje jasną alternatywę. Użytkownik może wykonać tę samą funkcję zwykłym kliknięciem, wyborem z listy albo wpisaniem wartości.

  • Listę można sortować przez przyciski „Przenieś w górę” i „Przenieś w dół”.
  • Zadanie na tablicy Kanban można przenieść przez menu „Przenieś do”.
  • Suwak ma pole liczbowe albo przyciski „Zwiększ” i „Zmniejsz”.
  • Strefa przeciągania pliku ma też widoczny przycisk „Wybierz plik”.
  • Mapa pozwala wpisać adres albo wybrać lokalizację z listy, zamiast wymagać przesuwania pinezki.
  • Tekst jasno mówi, że przeciąganie jest opcjonalne.

Zły przykład

Zły wzorzec zakłada, że użytkownik zawsze potrafi przeciągnąć element. Nie daje przycisku, menu, pola wartości ani innej ścieżki, która pozwala osiągnąć ten sam wynik.

  • Komunikat mówi tylko: „Przeciągnij elementy, aby ustawić kolejność”.
  • Komponent drag and drop nie ma przycisków ani menu akcji.
  • Suwak nie ma pola wartości ani przycisków zmiany wartości.
  • Mapa wymaga przesunięcia pinezki i nie ma pola adresu.
  • Strefa plików przyjmuje pliki tylko po przeciągnięciu.

Przykłady kodu

Kod — HTML

<ol>
  <li>
    Raport kwartalny
    <button type="button">
      Przenieś w górę
    </button>
    <button type="button">
      Przenieś w dół
    </button>
  </li>
  <li>
    Plan szkolenia
    <button type="button">
      Przenieś w górę
    </button>
    <button type="button">
      Przenieś w dół
    </button>
  </li>
</ol>

Przeciąganie może nadal istnieć, ale użytkownik ma też jednoznaczne przyciski do zmiany kolejności. To jest ta sama funkcja wykonana bez ruchu przeciągania.

Kod — HTML

<div class="upload-drop-zone">
  <p>
    Możesz przeciągnąć plik tutaj albo wybrać go z dysku.
  </p>

  <label for="attachment">
    Wybierz plik
  </label>
  <input
    id="attachment"
    name="attachment"
    type="file"
  >
</div>

Strefa przeciągania nie jest jedyną drogą. Użytkownik może użyć zwykłego pola pliku, które nie wymaga przeciągania.

Kod — HTML

<label for="price-range">
  Maksymalna cena
</label>
<input
  id="price-range"
  name="price-range"
  type="range"
  min="0"
  max="500"
  value="200"
>

<label for="price-value">
  Maksymalna cena w zł
</label>
<input
  id="price-value"
  name="price-value"
  type="number"
  min="0"
  max="500"
  value="200"
>

Suwak może zostać, ale pole liczbowe daje użytkownikowi inną drogę ustawienia tej samej wartości.

Kod — HTML

<p>
  Przeciągnij karty, aby ustawić kolejność.
</p>

<ul class="cards">
  <li draggable="true">Karta A</li>
  <li draggable="true">Karta B</li>
  <li draggable="true">Karta C</li>
</ul>

To zły przykład. Instrukcja i kod pokazują tylko przeciąganie. Brakuje przycisków, menu akcji, listy wyboru albo innej alternatywy.

Przykład graficzny

Źle

Przeciągnij kartę
Upuść w nowym miejscu

Tylko przeciąganie. Brak innej drogi wykonania tej samej funkcji.

Ryzykownie

Przeciągnij kartę
Więcej opcji ukryte w menu

Alternatywa istnieje, ale jest niejasna albo trudna do odkrycia.

Dobrze

Przeciąganie opcjonalne
Przenieś w górę / w dół
Wybierz miejsce z listy

Ta sama funkcja jest dostępna bez ruchu przeciągania.

To jest statyczny schemat. Pokazuje funkcję wymagającą przeciągania oraz alternatywę, która wykonuje tę samą czynność bez drag and drop.

Jak sprawdzić

  1. Znajdź wszystkie miejsca, w których użytkownik może przeciągać elementy.
  2. Sprawdź, jaką funkcję wykonuje przeciąganie: sortowanie, przenoszenie, wybór wartości, dodanie pliku albo ustawienie lokalizacji.
  3. Sprawdź, czy tę samą funkcję można wykonać bez przeciągania, np. przyciskiem, menu, listą wyboru albo polem wartości.
  4. Upewnij się, że alternatywa jest widoczna lub jasno opisana, a nie schowana w nieoczywistym miejscu.
  5. Sprawdź, czy alternatywa działa dla każdej pozycji i każdego stanu, nie tylko dla pierwszego elementu.
  6. Przetestuj komponent myszą, dotykiem i klawiaturą, ale nie myl tego kryterium z ogólną obsługą klawiatury.
  7. Jeśli przeciąganie jest jedyną drogą, dodaj alternatywny mechanizm albo zapisz, dlaczego przeciąganie jest istotą funkcji.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • część użyć atrybutu `draggable`,
  • część bibliotek i klas sugerujących drag and drop,
  • część suwaków, pól pliku i komponentów mapy, które warto sprawdzić ręcznie,
  • część braków etykiet lub nazw przy alternatywnych kontrolkach.

Automat nie oceni pewnie

  • czy alternatywa wykonuje dokładnie tę samą funkcję co przeciąganie,
  • czy alternatywa jest łatwa do znalezienia i zrozumiała,
  • czy przeciąganie jest naprawdę istotą funkcji,
  • czy menu akcji albo przyciski obsługują wszystkie przypadki,
  • czy komponent działa poprawnie przy dotyku, myszy i alternatywnych urządzeniach wejścia.

Typowe błędy

  • Sortowanie listy wyłącznie przez drag and drop.
  • Tablica Kanban, w której zadania można przenosić tylko przeciąganiem.
  • Suwak zakresu bez pola wartości, przycisków albo innej alternatywy.
  • Mapa wymagająca przeciągania pinezki bez pola adresu.
  • Upload pliku wyłącznie przez przeciągnięcie do strefy.
  • Alternatywa ukryta pod ikoną bez jasnej etykiety.
  • Przyciski alternatywne widoczne tylko po hoverze.
  • Opisanie drag and drop jako „dostępnego”, bo działa myszą i dotykiem, bez sprawdzenia alternatywy bez przeciągania.

Powiązane kryteria