Cibles tactiles et types de pointeur : dimensionner les contrôles pour les doigts et les souris

Ce que c'est

Une cible de pointeur est la zone qui réagit à un clic ou à un tap. Le critère de succès 2.5.8 Taille de la cible (Minimum) du WCAG 2.2, niveau AA, exige que cette cible mesure au moins 24 sur 24 pixels CSS, avec des exceptions listées : espacement (une cible sous-dimensionnée est acceptable si un cercle de 24 pixels centré sur elle ne coupe aucune autre cible ni aucun autre cercle de ce type), équivalent (la même fonction est disponible via une cible de la page qui respecte bien la taille), en ligne (cibles situées à l'intérieur de phrases ou contraintes par la hauteur de ligne du texte environnant), contrôle de l'agent utilisateur (contrôles rendus par défaut, non stylés par l'auteur) et essentiel. L'ancien critère 2.5.5 Taille de la cible (Amélioré), niveau AAA, demande 44 sur 44 pixels CSS, avec une liste d'exceptions similaire.

Le CSS peut savoir ce qui pointe. La media feature pointer indique la précision de l'entrée principale : none, coarse (précision limitée, comme un doigt sur un écran tactile) ou fine (un dispositif précis tel qu'une souris) ; any-pointer couvre toutes les entrées disponibles. La media feature complémentaire hover indique si l'entrée principale peut survoler confortablement.

Pourquoi c'est important

Les doigts sont larges et imprécis, les tremblements et la basse vision rendent les petites cibles difficiles, et c'est dans les barres d'outils denses que se produisent les mauvais taps. Les affordances qui ne fonctionnent qu'au survol (menus qui s'ouvrent au passage de la souris, infobulles portant des informations nécessaires) sont inatteignables sur un écran tactile.

Comment l'appliquer

• Donner aux contrôles interactifs une boîte minimale de 24 sur 24 pixels CSS via min-width/min-height ou du padding, et viser plus haut pour les actions principales ; les boutons uniquement composés d'une icône sont les coupables habituels.
• Là où des cibles sont alignées (pagination, icônes de barre d'outils), soit les agrandir, soit les espacer pour que les cercles de 24 pixels ne se chevauchent pas, en utilisant gap plutôt qu'une marge sur le dernier élément.
• Sous @media (pointer: coarse), augmenter le padding des contrôles, des cases à cocher et des lignes de liste, et élargir les poignées des curseurs ; sous (pointer: fine), une mise en page plus dense est acceptable.
• Ne jamais se fier au survol seul : tout ce qui s'affiche au survol doit aussi apparaître au focus et au tap, et @media (hover: none) peut faire basculer un menu au survol vers un menu qui s'ouvre au clic.
• Faire de toute la ligne ou de toute la carte la cible lorsqu'il s'agit de la zone de tap évidente, sans laisser des contrôles imbriqués la chevaucher.

Pièges

Les pixels CSS ne sont pas des pixels d'appareil ; le minimum de 24 pixels est indépendant de la densité d'écran. L'exception « en ligne » couvre les cibles situées à l'intérieur d'une phrase ou contraintes par la hauteur de ligne du texte environnant, pas les icônes dans une barre d'outils ou une liste. Agrandir la zone cliquable avec du padding transparent modifie la mise en page ; un pseudo-élément ::before avec des décalages négatifs agrandit la zone de frappe sans déplacer les éléments voisins. Les appareils combinant tactile et souris ne rapportent que le pointeur principal ; vérifier any-pointer si l'un ou l'autre importe.