Distance entre composants interactifs

Silktide mesure la taille et l'espacement des boutons, des liens et des contrôles de formulaire sur vos pages. De petits contrôles serrés les uns contre les autres sont faciles à activer par erreur, donc chacun doit soit mesurer au moins 24 × 24 pixels, soit disposer d'un espace dégagé suffisant autour.

Pourquoi c'est important

Tout le monde peut rater un petit bouton, mais pour les personnes souffrant de tremblements, d'arthrite ou d'une motricité fine limitée, des contrôles trop rapprochés rendent la page réellement difficile à utiliser - on tape le mauvais lien, on envoie le mauvais formulaire, ou on abandonne. Le problème est pire sur les écrans tactiles, où le bout du doigt est bien moins précis qu'un pointeur de souris.

Il s'agit du critère de succès 2.5.8 (Taille de cible minimale), une exigence de dans WCAG 2.2; il fait donc partie de l'objectif de conformité visé par la plupart des organisations.

Comment corriger

Rendez chaque élément interactif d'au moins 24 × 24 pixels . Définir min-width et min-height, ou ajouter du padding, suffit généralement.
À défaut, ajoutez de l'espace entre les contrôles de sorte qu'une zone de 24 × 24 pixels centrée sur chaque contrôle n'empiète pas sur ses voisins - des cibles plus petites sont acceptables si rien d'autre n'est à proximité.
Accordez une attention particulière aux boutons d'icône, aux liens de pagination et aux icônes de réseaux sociaux, souvent trop petits et trop groupés.

\/* Problème : des boutons d'icône de 16 px se touchent *\/
.toolbar button {
  width: 16px;
  height: 16px;
}

\/* Correctif : agrandir la zone cliquable à au moins 24x24 *\/
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Comment Silktide teste cela

Tester les versions mobile et ordinateur de chaque page ; les résultats peuvent différer entre les deux.
Repérer les éléments interactifs : liens, boutons, champs de formulaire et zones de carte d'image.
Ignorer les éléments qui ne sont pas normalement visibles, comme le contenu positionné hors écran pour les , ainsi que tout élément que vous avez exclu de la vérification.
Considérer conforme tout élément d'au moins 24 pixels de large et 24 pixels de haut.
Ignorer les contrôles insérés dans une phrase ou un bloc de texte, que les WCAG exemptent de cette règle.
Pour chaque petit élément restant, mesurer l'écart avec chaque autre élément interactif. L'écart requis correspond à 24 pixels moins la largeur de l'élément (horizontalement) et 24 pixels moins sa hauteur (verticalement).
Signaler l'élément si un autre contrôle se trouve dans cet écart, à moins que les deux ne soient des liens vers la même destination. Les éléments épinglés à l'écran, comme les en-têtes fixes (sticky), sont comparés à d'autres éléments épinglés plutôt qu'au contenu qui défile en dessous.

Dépannage

Un petit contrôle a réussi la vérification

La taille seule n'est pas un échec : un petit contrôle est conforme s'il dispose d'un espace dégagé suffisant autour de lui, s'il est inséré dans le texte, ou s'il n'est voisin que de liens pointant vers le même endroit. Cela reflète les exceptions prévues par les WCAG.

Seuls certains problèmes sont affichés

Silktide signale jusqu'à 10 exemples parmi les plus graves par page. Corriger un style partagé résout généralement de nombreux problèmes d'un coup.

Je veux la norme plus stricte

Cette vérification contrôle le minimum de niveau AA de 24 × 24 pixels. La vérification associée Contrôles suffisamment grands teste la recommandation plus stricte de niveau AAA de 44 × 44 pixels.