Kursory i wskaźniki

Na urządzeniach bez ekranu dotykowego kursor jest niezbędny, aby użytkownicy wiedzieli, z czym wchodzą w interakcję. Możesz też podać przydatne wskazówki dotyczące interakcji z elementem lub wpływu ruchu na touchpadzie lub myszy na Twoją witrynę.

Kursory

Przeglądarki automatycznie obsługują niektóre typowe przypadki użycia wskaźników.

Jeśli czytasz ten artykuł na urządzeniu z kursorem, przejrzyj stronę. Być może wcześniej nie zwracałeś(-aś) uwagi na to, jak zmienia się kursor, ale warto zauważyć, jakie wskazówki on daje. Gdy wskaźnik najedzie na tekst, kursor zmieni się w belkę wyboru, co oznacza, że możesz zaznaczyć tekst. Jeśli najedziesz kursorem na link, zmieni się on w dłoń ze wskazującym palcem, co oznacza, że możesz wykonać działanie. W pozostałych miejscach będzie widoczny domyślny kursor, którym często jest strzałka.

W miarę tworzenia bardziej interaktywnych witryn możesz dostosowywać kursor, aby użytkownicy łatwiej rozumieli interakcje.

Przeglądarki obsługują szereg słów kluczowych dla właściwości kursora, które zawierają wskazówki dotyczące przeciągania, zmiany rozmiaru, zaznaczania i innych działań.

Jeśli żaden z obsługiwanych kursorów nie informuje o interakcjach z elementem, możesz też podać obraz SVG lub PNG, który będzie używany jako kursor.

Karety

Karetka wstawiania wskazuje Twoją pozycję w edytowalnym tekście. Różni się on od kursora, ponieważ nie podąża za myszą. Kolor możesz zmienić za pomocą caret-color.

Reagowanie na dane wejściowe wskaźnika użytkownika

Użytkownicy korzystający z myszy lub trackpada mogą wchodzić w interakcję z bardziej precyzyjnym punktem na ekranie niż użytkownicy korzystający z ekranu dotykowego. Jeśli projektujesz tylko z myślą o precyzji myszy, użytkownicy z ekranami dotykowymi lub problemami z motoryką małą mogą nie być w stanie korzystać ze strony w odpowiedni sposób.

Częste problemy to zbyt małe przyciski lub elementy interaktywne, które są zbyt blisko siebie. Utrudniają one użytkownikom interakcję z właściwym elementem.

Dopilnowanie, aby przyciski i inne interaktywne elementy docelowe były wystarczająco duże, to ważny krok w zapewnieniu dostępności witryny. Możesz też dostosować style na podstawie precyzji urządzeń wejściowych użytkownika za pomocą zapytań o media pointer i any-pointer.

Funkcja multimedialna pointer odnosi się do głównego urządzenia wejściowego użytkownika, a any-pointer – do wszystkich urządzeń wejściowych. Urządzenia takie jak myszy możesz oznaczać symbolem fine, a urządzenia takie jak ekrany dotykowe – symbolem coarse. Wartość none oznacza, że użytkownik nie korzysta z urządzenia wejściowego ze wskaźnikiem.

Zdarzenia wskaźnika i dotknięcia

Wyłączanie określonych gestów na ekranie dotykowym

Gdy używasz ekranu dotykowego, przeglądarka obsługuje niektóre typowe gesty. Na przykład dotknięcie ekranu dwoma palcami i rozsunięcie ich zwykle powiększa stronę. Nie musisz wdrażać tych zachowań w swojej witrynie, ale w niektórych przypadkach możesz chcieć je wyłączyć lub zastąpić.

Aby zrezygnować z obsługi niektórych działań przez przeglądarkę, wymień działania, które mają być obsługiwane przez element. pan-x i pan-y umożliwiają gesty przesuwania jednym palcem. Można je włączyć razem z pinch-zoom, co umożliwia powiększanie i przesuwanie za pomocą wielu palców.

Słowo kluczowe manipulation jest odpowiednikiem słowa pan-x pan-y pinch-zoom. manipulation wyklucza inne zachowania związane z dotykiem, które wymagają wielu dotknięć w krótkim czasie, np. dwukrotne kliknięcie w celu powiększenia.

Po wyłączeniu obsługi działania przez przeglądarkę poprzez wykluczenie go z touch-action możesz skonfigurować zdarzenia wskaźnika dla tego działania.

Wyłączanie wszystkich zdarzeń i działań

W niektórych przypadkach możesz określić, że element nie jest interaktywny. Ustawienie pointer-events: none na przycisku spowoduje na przykład, że nie będzie można go kliknąć ani nawet wywołać stanu najechaniu na niego kursorem.

Sprawdź swoją wiedzę