Taille de la cible (minimum)

Ce que le critère demande

Chaque contrôle interactif sur la page doit occuper une zone de frappe d’au moins 24×24 pixels CSS — ou disposer d’un espacement suffisant autour de lui pour qu’un cercle de 24×24 centré sur la cible n’intersecte aucune autre cible. L’objectif est d’éviter que les utilisateurs avec un contrôle moteur fin limité, un tremblement, ou utilisant un écran tactile en déplacement manquent la cible et déclenchent la mauvaise action.

WCAG 2.2 fixe le minimum à 24×24 ; le critère AAA existant 2.5.5 conserve l’objectif plus ambitieux de 44×44.

Comment y répondre

• Définir un min-width / min-height de 24 px sur les boutons icône uniquement, les boutons de fermeture et toute cible tactile plus petite qu’un bouton standard.
• Pour les liens en ligne dans les paragraphes, une exemption s’applique — le critère de succès autorise explicitement les cibles « dans une phrase ».
• Pour les rangées d’icônes (boutons de barre d’outils, actions sur les lignes de tableau), utiliser le rembourrage pour pousser la zone de frappe à 24×24, même lorsque le glyphe de l’icône est plus petit.
• Pour les contrôles qui doivent rester visuellement petits (un petit « x » sur une puce), ajouter une marge/un espacement tampon afin que les cibles adjacentes soient à au moins 24 px de distance de centre à centre.
• Auditer en priorité la pagination, les fils d’Ariane, les actions sur les lignes de tableau et les icônes de barre d’outils — c’est là que les échecs se concentrent.

Échecs courants

• Boutons icône 16×16 (fermer, modifier, supprimer) sans rembourrage, notamment dans les tableaux et les barres d’outils.
• Rangées de pagination serrées où Précédent / 1 / 2 / 3 / Suivant se trouvent dans des cases de 18 px collées les unes aux autres.
• Cases à cocher / boutons radio personnalisés stylisés plus petits que le contrôle natif pour des raisons « minimalistes ».
• Boutons d’action flottants sur mobile qui dépassent 24×24 mais sont trop proches d’autres cibles tactiles.
• Boutons × de suppression d’étiquettes dimensionnés à 10–14 pixels — extrêmement courants dans les interfaces de filtre basées sur des puces.

Exemptions à connaître

Le critère de succès comporte cinq exceptions : équivalent (une cible plus grande sur la même page fait la même chose), en ligne (dans une phrase), contrôle de l’agent utilisateur (valeur par défaut du navigateur, par ex. <select> natif), essentiel (la petite taille est nécessaire pour transmettre l’information, par ex. une épingle sur une carte) et conforme (une règle plus générale impose la taille — rare).

Pourquoi c’est important

Les échecs de taille de cible apparaissent de manière disproportionnée lors des tests mobiles et pour les utilisateurs présentant la maladie de Parkinson, un tremblement essentiel, la sclérose en plaques, ou toute personne utilisant un écran tactile d’une seule main dans un train. Le passage de « pas de minimum » dans WCAG 2.1 à un plancher de 24×24 dans WCAG 2.2 a pris la plupart des sites en production par surprise — ce critère devrait être le nouveau critère de succès le plus cité dans les audits de 2026.