Contrôles suffisamment grands

Silktide mesure les boutons, liens et contrôles de formulaire sur vos pages et signale tout élément plus petit que 44 × 44 pixels. Des contrôles plus grands sont plus faciles à activer avec précision pour tout le monde, en particulier sur les écrans tactiles.

Pourquoi c’est important

Les petites cibles exigent une précision que beaucoup de personnes n’ont pas. Les visiteurs ayant des tremblements, une dextérité limitée, ou des doigts plus larges sur des appareils tactiles manquent souvent de petites commandes, activent la mauvaise ou doivent s’y reprendre à plusieurs reprises. Des tailles de cible généreuses rendent votre site plus rapide et moins frustrant pour chaque visiteur, pas seulement pour les personnes ayant des troubles moteurs.

Il s’agit du critère de succès 2.5.5 (Taille de la cible – améliorée), un . Le niveau AAA est ambitieux : la plupart des sites échouent par défaut à ce test, car 44 × 44 pixels est plus grand que la taille habituelle des liens et des boutons. Si vous visez le niveau AA, concentrez-vous d’abord sur le contrôle associé Distance entre composants interactifs, qui teste l’exigence AA de 24 × 24 pixels.

Comment corriger

Agrandissez les contrôles clés à au moins 44 × 44 pixels , en utilisant min-width, min-height ou du padding. Donnez la priorité aux actions principales telles que la navigation, la recherche et les boutons de formulaire.
Lorsque l’agrandissement d’un contrôle n’est pas pratique, fournissez un lien ou un contrôle équivalent sur la même page qui respecte cette taille — Silktide ignore automatiquement les petits liens lorsqu’il existe un lien suffisamment grand vers la même destination.
Si vous avez décidé qu’un contrôle est acceptable en l’état — par exemple, s’il relève d’une exception WCAG que ce test ne peut pas détecter — vous pouvez le résultat ou exclure l’élément du contrôle.

/* Problème : un bouton d’icône 30x30 */
.search-button {
  width: 30px;
  height: 30px;
}

/* Correctif : respecter la recommandation 44x44 */
.search-button {
  min-width: 44px;
  min-height: 44px;
}

Comment Silktide teste ce point

Teste les versions mobile et bureau de chaque page ; les résultats peuvent différer entre les deux.
Repère les éléments interactifs : liens, boutons, champs de formulaire et zones de carte d’image.
Ignore les éléments qui ne sont normalement pas visibles, tels que le contenu placé hors écran pour les , ainsi que tout élément que vous avez exclu du contrôle.
Ignore les contrôles directement adjacents à du texte, car les WCAG exemptent les cibles qui apparaissent dans une phrase ou un bloc de texte.
Pour les liens, ignore tout lien ayant un équivalent : un autre lien visible sur la même page pointant vers la même destination et mesurant au moins 44 × 44 pixels.
Signale tout élément restant dont la largeur est inférieure à 44 pixels ou dont la hauteur est inférieure à 44 pixels. Les tailles sont arrondies au dixième avant comparaison, conformément à ce qui est affiché.

Dépannage

Seuls certains échecs sont répertoriés

Silktide affiche jusqu’à 100 exemples par page. Comme les échecs de ce test sont fréquents, une page peut en contenir davantage ; corriger des styles partagés résout de nombreux problèmes signalés d’un coup.

Les WCAG prévoient des exceptions que ce test ne peut pas voir

Les WCAG exemptent les cibles dont la taille est essentielle, définie par le navigateur plutôt que par vos styles, ou dupliquée par un contrôle équivalent ailleurs sur la page. Silktide détecte automatiquement les exceptions « dans le texte » et « lien équivalent » ; les autres relèvent de votre jugement. Approuvez les résultats qui s’y qualifient.