Sur mobile, un bouton peut être parfaitement visible mais rester difficile à toucher. Lorsque les zones tactiles sont trop petites ou trop rapprochées, l’utilisateur risque d’appuyer sur le mauvais élément, de devoir recommencer ou d’abandonner l’action.
L’accessibilité mobile ne concerne donc pas uniquement la taille du texte et le responsive : la taille et l’espacement des éléments interactifs comptent aussi.
Qu’est-ce qu’une zone tactile ?
La zone tactile est la surface réellement activable d’un bouton, d’un lien, d’une icône ou d’un autre contrôle sur un écran tactile.
Elle peut être plus grande que l’élément visible lui-même. Une petite icône peut par exemple disposer d’une zone cliquable plus généreuse grâce à l’espace qui l’entoure.
Pourquoi des boutons trop petits posent-ils problème ?
Une petite cible demande davantage de précision. Cela peut gêner particulièrement les personnes ayant une motricité fine réduite, des tremblements, une fatigue importante ou simplement celles qui utilisent le site sur un petit écran en mouvement.
Le problème augmente lorsque plusieurs boutons ou liens sont placés très près les uns des autres.
Que prévoient les WCAG 2.2 ?
Le critère WCAG 2.2 « Target Size (Minimum) » de niveau AA prévoit notamment une cible d’au moins 24 × 24 pixels CSS, avec plusieurs exceptions prévues par le référentiel, notamment lorsque l’espacement autour de petites cibles permet d’éviter les activations accidentelles.
Le critère renforcé « Target Size (Enhanced) », de niveau AAA, utilise une cible de 44 × 44 pixels CSS, là encore avec certaines exceptions.
Dans la pratique, viser des zones tactiles généreuses améliore souvent le confort bien au-delà du strict minimum technique.
Faut-il donc mettre tous les boutons à 44 × 44 pixels ?
Pas nécessairement dans tous les cas. La taille minimale dépend du critère visé, du type de composant et des exceptions applicables.
Mais pour les actions importantes sur mobile — menu, fermeture d’une fenêtre, bouton principal, contrôles de formulaire ou navigation — prévoir une zone tactile confortable est généralement une bonne pratique.
La taille visible et la zone cliquable sont-elles la même chose ?
Non. Un élément visuellement compact peut rester facile à utiliser si sa zone interactive est plus grande que son dessin apparent.
Par exemple, une icône de fermeture peut mesurer 20 pixels visuellement tout en être placée dans un bouton dont la zone interactive est nettement plus grande.
Il faut toutefois veiller à ce que cette zone ne chevauche pas une autre cible interactive.
Pourquoi l’espacement entre les éléments est-il important ?
Deux petites cibles proches l’une de l’autre peuvent provoquer des erreurs même si chacune fonctionne correctement.
Ajouter de l’espace entre les liens, icônes ou boutons réduit le risque d’activer le mauvais élément. C’est particulièrement important dans les menus mobiles, barres d’outils, carrousels et groupes de boutons.
Quels éléments faut-il contrôler en priorité ?
- le bouton d’ouverture et de fermeture du menu mobile ;
- les liens du menu et des sous-menus ;
- les boutons de formulaire ;
- les cases à cocher et boutons radio ;
- les icônes seules, comme fermer, suivant ou précédent ;
- les flèches d’un carrousel ;
- les liens placés côte à côte ;
- les boutons flottants ou panneaux d’accessibilité.
Comment tester simplement les zones tactiles ?
Un premier contrôle consiste à utiliser réellement le site sur smartphone, sans chercher à toucher précisément le centre des boutons.
Il faut vérifier si les actions importantes restent faciles à déclencher, si deux éléments voisins se confondent, si les menus sont confortables et si les contrôles restent utilisables avec un zoom ou une taille de texte plus élevée.
Les outils d’audit peuvent signaler certaines cibles trop petites, mais un test manuel reste utile pour évaluer le confort réel.
Et les liens dans un paragraphe ?
Les liens intégrés dans une phrase peuvent relever d’exceptions prévues par les WCAG selon le contexte. Cela ne signifie pas qu’ils doivent être rendus difficiles à utiliser.
Une typographie lisible, un espacement de ligne suffisant et un style de lien clair contribuent à améliorer leur utilisation sur mobile.
Quel lien avec le focus clavier ?
Une grande zone tactile n’améliore pas automatiquement la navigation au clavier. Les deux sujets sont complémentaires.
Un bouton doit pouvoir être suffisamment facile à toucher sur mobile, mais aussi être atteignable au clavier lorsque son fonctionnement le nécessite et disposer d’un focus visible.
Que peut vérifier DOMMAT ?
Dans le cadre d’un audit ou d’un contrôle d’accessibilité, DOMMAT peut examiner les principales zones tactiles, leur espacement et leur comportement sur mobile dans le périmètre convenu.
Pour aller plus loin, consultez ce que vérifie un audit d’accessibilité web, l’approche Accessibilité DOMMAT, notre article sur la navigation clavier et le focus visible ou celui consacré à l’agrandissement du texte.
Vous pouvez également présenter votre besoin d’accessibilité.