Curseurs et pointeurs

Sur les appareils sans écran tactile, le curseur est un moyen essentiel pour vos utilisateurs de savoir avec quoi ils interagissent. Vous pouvez également fournir des conseils utiles sur la façon d'interagir avec un élément ou sur l'impact d'un mouvement avec un pavé tactile ou une souris sur votre site.

Curseurs

Les navigateurs gèrent automatiquement certains cas d'utilisation courants pour les curseurs.

Si vous lisez cet article sur un appareil doté d'un curseur, explorez la page. Vous n'avez peut-être pas remarqué comment les curseurs changent auparavant, mais notez les indices qu'ils fournissent. Lorsque vous pointez sur du texte, le curseur se transforme en un I-beam de sélection, ce qui suggère que vous pouvez sélectionner le texte. Si vous pointez sur un lien, le curseur se transforme en main pointant avec l'index, ce qui suggère que vous pouvez effectuer une action. Partout ailleurs, le curseur par défaut, qui est souvent une flèche, s'affiche.

À mesure que vous créez des sites plus interactifs, vous voudrez personnaliser le curseur pour que les utilisateurs puissent mieux comprendre les interactions.

Les navigateurs acceptent une série de mots clés pour la propriété cursor, qui fournissent des indications pour le déplacement, le redimensionnement, la sélection et plus encore.

Si aucun des curseurs compatibles ne communique les interactions d'un élément, vous pouvez également fournir une image SVG ou PNG à utiliser comme curseur.

Accents circonflexes

Un curseur d'insertion permet d'indiquer votre position dans un texte modifiable. Il est différent de votre curseur, car il ne suit pas votre souris. Vous pouvez modifier la couleur avec caret-color.

Répondre aux entrées de pointeur d'un utilisateur

Les utilisateurs disposant d'une souris ou d'un pavé tactile peuvent interagir avec un point plus précis sur l'écran que ceux qui utilisent un écran tactile. Si vous ne concevez votre page que pour la précision d'une souris, les utilisateurs disposant d'un écran tactile ou souffrant de problèmes de motricité fine risquent de ne pas pouvoir interagir avec votre page comme ils le souhaitent.

Il peut s'agir, par exemple, de boutons trop petits ou d'éléments interactifs trop proches les uns des autres. Cela empêche les utilisateurs d'interagir avec l'élément approprié.

Il est important de vous assurer que vos boutons et autres cibles interactives sont suffisamment grands pour que votre site soit accessible. Vous pouvez également personnaliser vos styles en fonction de la précision des périphériques d'entrée de l'utilisateur avec les requêtes média pointer et any-pointer.

La fonctionnalité média pointer fait référence au principal périphérique d'entrée de l'utilisateur, tandis que any-pointer fait référence à tous les périphériques d'entrée. Vous pouvez associer des appareils tels que des souris avec fine et des appareils tels que des écrans tactiles avec coarse. La valeur none indique que l'utilisateur n'utilise pas de périphérique d'entrée avec un pointeur.

Événements tactiles et de pointeur

Désactiver des gestes tactiles spécifiques

Lorsque vous utilisez un écran tactile, le navigateur gère certains gestes courants. Par exemple, si vous appuyez sur l'écran avec deux doigts et que vous les écartez, vous effectuez généralement un zoom avant sur le site. Bien que vous n'ayez pas à implémenter ces comportements sur votre site, vous pouvez les désactiver ou les remplacer dans certains cas.

Pour désactiver la gestion de certaines actions par le navigateur, listez les actions que vous souhaitez que l'élément gère. pan-x et pan-y permettent les gestes de déplacement à un doigt. Ils peuvent être activés en même temps que pinch-zoom, qui permet de faire un zoom avant et arrière et de faire un panoramique avec plusieurs doigts.

Le mot clé manipulation équivaut à pan-x pan-y pinch-zoom. manipulation exclut les autres comportements tactiles qui nécessitent plusieurs contacts en peu de temps, comme le double-tap pour zoomer.

Après avoir désactivé la gestion d'une action par le navigateur en l'excluant de touch-action, vous pouvez configurer des événements de pointeur pour cette action.

Désactiver tous les événements et toutes les actions

Dans certains cas, vous pouvez spécifier qu'un élément n'est pas interactif. Par exemple, si vous définissez pointer-events: none sur un bouton, vous ne pourrez pas cliquer dessus ni même déclencher un état de survol.

Vérifier que vous avez bien compris