Touch target : la taille minimale des zones cliquables
Touch target : quelle taille minimale pour vos boutons et liens sur mobile ? Repères WCAG 2.2, Apple et Material, méthode de contrôle et pièges à éviter.
Touch target : de quoi parle-t-on exactement ?
Le touch target, ou cible tactile, désigne la surface réellement cliquable d'un élément interactif : bouton, lien, icône, case à cocher, champ de formulaire. Ce n'est pas forcément la taille de ce qu'on voit à l'écran. Une petite icône de panier peut très bien disposer d'une zone de toucher bien plus large, invisible, qui l'entoure.
Sur ordinateur, la souris est précise. Sur mobile, le doigt couvre une surface bien plus grande que le pointeur et masque ce qu'il vise. Quand la cible est trop petite ou collée à une autre, l'utilisateur touche le mauvais lien, revient en arrière, recommence. C'est exactement ce que décrit la loi de Fitts : plus une cible est petite et éloignée, plus elle est lente et difficile à atteindre.
Pourquoi un dirigeant de PME devrait s'en soucier
Votre bouton d'appel, votre CTA de devis ou votre lien vers le panier sont des touch targets. S'ils sont mal dimensionnés, une partie des visiteurs abandonne sans que vous le sachiez, car un clic raté ne laisse aucune trace dans vos statistiques. La taille des cibles tactiles touche donc à la fois l'accessibilité et votre taux de conversion.
Touch target size : les tailles minimales de référence
Il n'existe pas un chiffre unique, mais plusieurs repères qui se complètent. Retenez surtout l'écart entre le minimum exigé et le confort recommandé.
WCAG 2.2 : le critère 2.5.8 au niveau AA
Le critère « Target Size (Minimum) » des WCAG 2.2 fixe une cible d'au moins 24 × 24 pixels CSS. Il prévoit des exceptions, par exemple si l'espacement autour de la cible compense sa petite taille, si un équivalent plus grand existe sur la même page, ou pour un lien placé dans une phrase. Le critère 2.5.5, de niveau AAA, monte à 44 × 44 pixels CSS : c'est le seuil à privilégier si vous voulez un vrai confort.
Apple et Material Design
Comment vérifier les touch targets de votre site en cinq étapes
Ce contrôle ne demande pas d'être développeur pour les premières étapes. Il se fait page par page, en commençant par celles qui rapportent.
Étape 1 : lister les éléments qui comptent
Dressez la liste des éléments interactifs de vos pages clés : menu, bouton d'appel, formulaire de contact, ajout au panier, liens du pied de page. Commencez par le parcours qui mène au contact ou à l'achat, puisque c'est là qu'une erreur de toucher coûte le plus cher.
Étape 2 : mesurer la zone réelle
Ouvrez les outils de développement de votre navigateur, passez en vue mobile et survolez chaque élément. Le cadre affiché donne la taille de la zone cliquable, padding compris. Si le chiffre reste sous 24 pixels CSS de côté, la cible est trop petite. Entre 24 et 44, elle est acceptable mais perfectible.
Étape 3 : lancer un audit automatique
Selon leur version, des outils comme Lighthouse ont signalé le message « Touch targets do not have sufficient size or spacing ». Côté applications Android, Android Studio et l'Accessibility Scanner de Google remontent un avertissement du type « touch target size too small ». Ces alertes donnent une première liste, mais elles ne remplacent pas l'œil humain.
Étape 4 : tester avec de vrais doigts
Prenez un téléphone, de préférence petit, et parcourez votre site d'une main, avec le pouce. Faites tester une personne qui ne connaît pas le site. Un test utilisateur à quelques personnes suffit souvent à repérer les icônes qu'on rate et les liens trop serrés.
Étape 5 : corriger, puis revérifier
La correction passe le plus souvent par le CSS : augmenter le padding plutôt que la taille de l'icône, imposer une hauteur minimale aux boutons, espacer les liens d'une liste. Revérifiez ensuite sur plusieurs tailles d'écran, car une correction peut décaler la mise en page ailleurs.
Ce qui fait varier la bonne taille
Le bon dimensionnement dépend du contexte. Un bouton principal, utilisé souvent et sous pression, mérite plus de place qu'un lien secondaire. La position compte aussi : les coins hauts de l'écran sont durs à atteindre au pouce, ce qui justifie des cibles plus larges ou un CTA fixe en bas d'écran.
Les pièges les plus fréquents
Le premier piège consiste à agrandir le visuel au lieu de la zone : une icône énorme alourdit le design sans gain réel. Le deuxième, ce sont les liens empilés dans un menu ou un pied de page, chacun assez grand mais collés les uns aux autres. Le troisième touche les cases à cocher et boutons radio natifs, minuscules par défaut, dont le libellé n'est pas cliquable.
Méfiez-vous aussi des zones tactiles qui se chevauchent. Si deux cibles se recouvrent, le navigateur choisit pour vous, et rarement dans le bon sens. Pensez enfin à l'état focus : une cible bien dimensionnée doit aussi rester visible quand on navigue au clavier.
Ces réglages se prévoient dès la maquette, dans une démarche mobile first. C'est ce que nous faisons pour chaque création de site internet : chez RankerSquare, un site vitrine sur-mesure est proposé dès 19,90 € par mois en abonnement, et les projets plus complexes sont chiffrés sur devis, selon le nombre de pages et de composants à contrôler.
Questions fréquentes
Les WCAG 2.2 fixent au moins 24 × 24 pixels CSS au niveau AA, avec des exceptions liées à l'espacement. Pour un vrai confort, visez 44 × 44 pixels CSS, proche des recommandations d'Apple. Material Design conseille 48 × 48 dp sur Android.
Ajoutez du padding autour de l'élément plutôt que d'agrandir l'icône ou le texte. Vous pouvez aussi rendre cliquable tout le bloc parent, par exemple toute la carte d'un produit. Le visuel reste identique, seule la zone sensible au toucher s'élargit.
La taille, c'est la surface de l'élément lui-même. L'espacement, c'est la distance qui le sépare de ses voisins. Les WCAG 2.2 acceptent une petite cible si l'espace libre autour d'elle compense, mais une cible large et bien espacée reste toujours la solution la plus sûre.
