Taille de la cible tactile

La taille de la cible tactile est la dimension opérationnelle de tout élément qu’un utilisateur peut appuyer ou cliquer. WCAG fixe deux seuils : un minimum AAA de 44×44 pixels CSS (depuis WCAG 2.1) et un minimum AA de 24×24 pixels CSS (introduit dans WCAG 2.2). Le critère existe parce que les handicaps moteurs — et même l’imprécision ordinaire sur un petit écran — rendent les cibles minuscules inutilisables.

Les deux critères WCAG

• 2.5.5 Target Size (Enhanced) — Niveau AAA — les cibles activées par pointeur doivent faire au moins 44×44 pixels CSS. Règle ancienne ; difficile à atteindre sur l’ensemble d’un site.
• 2.5.8 Target Size (Minimum) — Niveau AA, introduit dans WCAG 2.2 — les cibles activées par pointeur doivent faire au moins 24×24 pixels CSS. Le plancher pratique de conformité.

Une cible satisfaisant au seuil AAA de 44×44 satisfait également au seuil AA de 24×24.

Ce que la règle exige réellement

Les chiffres se réfèrent à la zone de cible, pas seulement à l’icône visible. Les Human Interface Guidelines d’Apple et le Material Design de Google retiennent tous deux des tailles de cible de 44 pt / 48 dp pour la même raison — des données ergonomiques réelles les sous-tendent.

Un exemple courant : un bouton icon-only dessiné comme un SVG de 16×16 pixels, mais avec un rembourrage portant la zone cliquable à 44×44. La règle est satisfaite. L’icône visible est petite ; la cible est l’icône visible plus la zone rembourrée autour d’elle.

Exemptions

Le critère 2.5.8 (niveau AA) prévoit des exceptions explicites :

• Exemption par espacement. Si une cible fait au moins 24×24 ou est entourée de suffisamment d’espace blanc qu’aucune autre cible ne se trouve à moins de 24 pixels CSS, elle est conforme. Cela protège les mises en page denses en ligne (comme les liens textuels dans un corps de texte) dont les zones de cible sont petites mais espacées suffisamment pour ne pas risquer d’activer accidentellement un voisin.
• Contrôle équivalent ailleurs. Une petite cible est acceptable si la même fonction est disponible via un autre contrôle plus grand sur la même page.
• Cibles en ligne. Les liens dans le texte courant sont exemptés — il ne faut pas reformater le corps de texte autour d’une règle de 24 pixels par lien.
• Contrôlées par l’agent utilisateur. Les contrôles par défaut du navigateur sont exemptés.
• Essentielles. Lorsque la taille est inhérente à la fonction (par exemple, une grille de CAPTCHA).

Ce que cela concerne en pratique

Trois défaillances fréquentes en production :

• Boutons de navigation icon-only dimensionnés à 28×28. Enfreint 2.5.8 sauf si entouré d’un espace blanc suffisant, ce que la plupart des barres de navigation denses ne permettent pas.
• Listes de cases à cocher rapprochées. Cases dessinées en 16×16 sans rembourrage, alignées verticalement sans espacement. La cible et l’espacement sont tous deux en deçà de la règle.
• Flèches « précédent/suivant » de carrousels mobiles. Souvent dessinées comme des chevrons de 32 pixels avec 4 pixels de rembourrage. Enfreint 2.5.8.

L’audit manuel le plus rapide

Ouvrez les outils de développement sur n’importe quel viewport en mode émulation mobile. Inspectez chaque élément interactif. Notez la boîte englobante. Tout ce qui est en dessous de 24 pixels CSS dans l’une ou l’autre dimension, avec des cibles adjacentes à moins de 24 pixels CSS, enfreint le critère 2.5.8.

La plupart des équipes adoptent un token de taille de cible dans leurs composants — chaque élément interactif bénéficie d’une zone de clic d’au moins 44×44, quelle que soit sa taille visible. C’est le moyen le plus économique de rendre la règle sans objet.