jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Vérificateur de taille de cible tactile

Vérifiez les éléments interactifs selon WCAG 2.2 taille minimale (2.5.8) avec résultats AA/AAA et recommandations CSS.

Chargement de l'outil...

Qu'est-ce que Vérificateur de taille de cible tactile ?

Le Criterium de Succes WCAG 2.2 2.5.8 Taille de Cible exige que les elements interactifs aient une zone de contact d'au moins 24x24 pixels CSS (AA). Le niveau AAA necessite 44x44px. Ces tailles garantissent que les personnes ayant des troubles moteurs ou utilisant des appareils tactiles peuvent appuyer ou cliquer facilement sur les elements interactifs sans activer accidentellement les elements adjacents.

Réponse rapide

WCAG 2.2 exige que les elements interactifs aient une taille de cible d'au moins 24x24px (AA) ou 44x44px (AAA). Quatre exceptions s'appliquent : les liens inline, les controles natifs, les elements essentiels et les elements avec 24px+ d'espacement vers les cibles adjacentes. Utilisez CSS min-width/min-height et gap/padding pour corriger les cibles trop petites.

Last updated: 2026-05-28

Limites

  • Cet outil verifie les dimensions statiques uniquement. Il ne tient pas compte des mises en page dynamiques, des points de rupture responsifs ou des niveaux de zoom qui peuvent modifier la taille de cible effective a differentes tailles d'ecran.
  • L'exception d'espacement necessite une verification manuelle de l'espacement reel entre les cibles adjacentes. Cet outil verifie la valeur d'espacement que vous saisissez mais ne peut pas mesurer les distances reelles de mise en page DOM.
  • WCAG 2.5.8 est une exigence de niveau AA dans WCAG 2.2. Certains organismes d'application peuvent l'appliquer plus strictement que d'autres, et l'interpretation des exceptions varie.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Saisissez la largeur et la hauteur de votre element interactif en pixels CSS.
  2. Saisissez l'espacement jusqu'a l'element interactif adjacent le plus proche si connu.
  3. Selectionnez le type d'element — differentes exceptions s'appliquent aux liens inline, controles natifs et elements essentiels.
  4. Consultez le resultat de reussite/echec et les recommandations de correctifs CSS.

A quoi il sert

  • Verifier que les boutons de navigation mobile respectent l'exigence de taille de cible AA de 24px.
  • Verifier que les petits boutons icone seulement ont un espacement suffisant par rapport aux elements adjacents pour beneficier de l'exception d'espacement.
  • Auditer une page pour l'accessibilite tactile avant une revue de conformite WCAG.

Cas d'usage

Exemples concrets

Exemple

Boutons icone de navigation mobile

Une navigation mobile a des boutons icone de 20x20px. L'outil signale un echec AA. Ajouter 4px de padding pour atteindre 24x24px passe AA, ou ajouter 24px d'espacement entre les boutons qualifie pour l'exception d'espacement.

Exemple

Liens texte inline

Un article contient des liens texte inline qui ne font que 18px de hauteur. L'outil applique l'exception inline et passe AA car les liens dans les blocs de texte sont exemptes de la taille de cible minimale.

Erreurs frequentes

  • Supposer que l'espacement seul corrige la taille de cible — l'exception d'espacement necessite que l'element ait au moins 20px et 24px d'espacement avec les cibles adjacentes.
  • Appliquer l'exception inline a des elements non inline comme des boutons autonomes ou des liens de navigation — l'exception inline s'applique uniquement aux liens dans les blocs de texte.
  • Verifier les dimensions du bureau au lieu des pixels CSS — les pixels CSS peuvent differer des pixels de l'appareil sur les ecrans haute densite. Utilisez toujours les valeurs CSS calculees depuis les outils de developpement.

Vérification

  1. Utilisez les outils de developpement du navigateur pour inspecter la largeur et la hauteur calculees de l'element en pixels CSS.
  2. Verifiez l'espacement entre les elements interactifs adjacents en utilisant la mesure de distance des outils de developpement ou en inspectant les proprietes gap, margin et padding.

FAQ

Questions sur Vérificateur de taille de cible tactile

Qu'est-ce qui compte comme espacement vers une cible adjacente ?

L'espacement est mesure du bord d'une cible au bord de l'element interactif le plus proche suivant. Cela inclut les boutons, liens, champs de saisie et tout autre element cliquable. Les espaces blancs, marges, padding ou contenu non interactif entre les cibles comptent comme espacement. L'exception d'espacement necessite au moins 24px de degagement.

Cette verification s'applique-t-elle au bureau ainsi qu'au mobile ?

WCAG 2.5.8 s'applique a tous les appareils avec des entrees par pointeur, y compris les souris de bureau. Bien que le critere ait ete motive par l'accessibilite tactile mobile, l'exigence est independante de l'appareil. Les utilisateurs de bureau avec des troubles moteurs ou utilisant des dispositifs de pointage alternatifs beneficient egalement de cibles plus grandes.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi