WCAG 2.5.8 Taille de la cible (minimum)

Le critère de succès 2.5.8 exige que les cibles cliquables ou actionnables par pression mesurent au moins 24 sur 24 pixels CSS, sauf si l'une de plusieurs exceptions s'applique. C'est un critère de niveau AA sous la règle 2.5 (Modalités d'entrée), nouveau dans les WCAG 2.2.

Pourquoi la taille des cibles compte

Les petites cibles tactiles sont difficiles à atteindre avec précision pour les personnes ayant une motricité fine limitée, un tremblement des mains, ou des doigts larges au regard d'un élément d'écran tactile réduit - et les erreurs de pression sur des cibles voisines tout aussi minuscules sont une source de frustration courante pour tout le monde, pas seulement pour les personnes handicapées, ce qui explique en partie que ce point soit devenu un critère à part entière.

Les exceptions qui rendent ce critère praticable

Une cible plus petite que 24 × 24 px satisfait tout de même le critère si l'une de ces conditions s'applique :

• Espacement : la cible est éloignée d'au moins 24 px de toute autre cible - de centre à centre, ou avec un espacement équivalent -, même si la cible elle-même est plus petite.
• Équivalence : la même fonction est disponible ailleurs dans la page, par une cible qui respecte la taille minimale.
• Insertion dans le texte : la cible se trouve à l'intérieur d'une phrase ou d'un bloc de texte - un lien inséré dans un paragraphe -, où imposer une taille minimale n'est pas praticable.
• Caractère essentiel : la petite taille est essentielle à la fonction, ou elle est déterminée par le navigateur ou l'agent utilisateur sans que l'auteur puisse la modifier - une case à cocher rendue nativement à la taille par défaut du système, par exemple.

Où cela échoue couramment

• De petits boutons réduits à une icône - boutons de fermeture, icônes de réseaux sociaux - nettement inférieurs à 24 px, sans espacement voisin pour compenser.
• Des tableaux ou des listes denses comportant de petites icônes cliquables serrées les unes contre les autres.
• Des cases à cocher ou boutons radio sur mesure stylés plus petits que leurs équivalents natifs, sans espacement voisin pour compenser.

La correction pratique

Agrandissez la zone réellement cliquable - ce qui n'implique pas nécessairement d'agrandir l'icône visuelle : une marge intérieure autour d'une petite icône, qui porte sa zone de contact effective à 24 × 24 px ou au-delà, satisfait le critère sans rien changer à la conception visuelle :

.icon-button {
  /* L'icône visuelle peut rester petite ; la marge intérieure étend la zone de contact */
  padding: 8px;
  min-width: 24px;
  min-height: 24px;
}