Distance entre les 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 sont faciles à activer par erreur, donc chacun devrait soit mesurer au moins 24 par 24 pixels, soit disposer d'un espace libre suffisant autour de lui.

Pourquoi c'est important

Tout le monde peut rater un petit bouton, mais pour les personnes ayant des tremblements, de l'arthrite ou une motricité fine limitée, des contrôles serrés rendent une page réellement difficile à utiliser — on touche le mauvais lien, on soumet le mauvais formulaire, ou on abandonne carrément. 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 des (« Taille de la cible (minimum) »), une exigence de dans WCAG 2.2; il fait donc partie de l'objectif de conformité visé par la plupart des organisations.

Comment corriger

Faites en sorte que chaque élément interactif mesure au moins 24 par 24 pixels . Définir min-width et min-height, ou ajouter une marge interne (padding), suffit généralement.
Sinon, ajoutez de l'espace entre les contrôles de sorte qu'une zone de 24 par 24 pixels centrée sur chaque contrôle n'empiète pas sur ses voisins — des cibles plus petites sont acceptables lorsqu'aucun autre élément n'est à proximité.
Portez une attention particulière aux boutons d'icône, aux liens de pagination et aux icônes de médias sociaux, souvent trop petits et regroupés de près.

\/* Problème : boutons d'icône de 16 px qui 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 effectue ce test

Tester les versions mobiles et de bureau 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 normalement pas 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 placé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 est de 24 pixels moins la largeur de l'élément (horizontalement) et de 24 pixels moins sa hauteur (verticalement).
Signaler l'élément si un autre contrôle tombe dans cet écart, sauf si les deux sont des liens vers la même destination. Les éléments épinglés à l'écran, comme les en-têtes fixes, sont comparés aux autres éléments épinglés plutôt qu'au contenu qui défile en dessous.

Dépannage

Un petit contrôle a passé la vérification

La taille seule n'est pas un échec : un petit contrôle réussit s'il dispose d'assez d'espace libre autour, s'il est en ligne dans le texte ou s'il n'est voisin que de liens pointant vers le même endroit. Cela reflète les exceptions que les WCAG permettent elles-mêmes.

Seules certaines erreurs sont répertoriées

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

Je veux la norme plus stricte

Cette vérification teste le minimum du niveau AA de 24 par 24 pixels. La vérification connexe Contrôles suffisamment grands teste la recommandation plus stricte du niveau AAA de 44 par 44 pixels.