target-size-minimum
Les cibles de pointeur doivent mesurer au moins 24x24px ou être suffisamment espacées des autres cibles
Vérifie que les cibles actionnables au pointeur ont une zone d’activation effective d’au moins 24 par 24 pixels CSS, ou remplissent une exception admise (par exemple un espacement suffisant).
Applicabilité. S’applique aux éléments <button>, <summary>, <a href>, <area href>, <input>, <select>, <textarea> et aux éléments dont le rôle se résout en button ou link (le premier vrai rôle de l’attribut role, sans tenir compte de la casse) atteignables au pointeur : rendus, non neutralisés par pointer-events:none, et dotés de quelque chose qu’un pointeur peut encore atteindre (une cible entièrement découpée n’a rien ; une cible en display: contents est son contenu). L’exclusion de l’arbre d’accessibilité ne sert pas de filtre ici : un contrôle aria-hidden reste une cible qu’un pointeur peut atteindre. <area> est retenu mais jamais réellement évalué : il n’a pas de boîte propre à mesurer. Un élément personnalisé auquel ses ElementInternals donnent le rôle button ou link (this.attachInternals().role), sans attribut role qui en nomme un autre, compte comme un élément natif doté de ce rôle.
Attendu. Chaque cible mesure au moins 24 par 24 pixels CSS, ou remplit l’une des exceptions du critère 2.5.8 que cette règle peut établir à partir de la géométrie. Une cible est la zone qu’un pointeur peut atteindre : sa border box avec ses coins arrondis et ses transformations 2D, découpée par clip et clip-path: inset() sur sa chaîne de blocs conteneurs et pas plus grande qu’une boîte de cette chaîne qui découpe son débordement, le contenu qui en dépasse compris. Ce qui est peint par-dessus une cible ne lui retire rien, y compris une autre cible : qu’une couche décorative, une superposition ou une ligne épinglée recouvre une cible dépend du moment et de la position de défilement de l’analyse, ce qui ne dit donc rien de la taille de la cible, et le critère 2.5.8 mesure la cible elle-même. Deux cibles qui se chevauchent sont chacune dans le cercle de l’autre : une cible trop petite reste donc trop proche. Une boîte qui découpe son débordement (overflow autre que visible, ou contain: paint), que la personne ou un script fait défiler, ne coupe pas la cible là où se trouve actuellement son bord : la cible est mesurée en entier, comme si elle y avait défilé, sans dépasser la taille de la boîte, et seules les boîtes et les cibles situées dans la boîte sont proches d’une cible que celle-ci maintient hors de vue. Elle est assez grande lorsqu’un carré de 24 par 24 aligné sur la page tient dans cette zone, comme la mesure le document Understanding 2.5.8. Les exceptions : l’espacement (un cercle de 24px de diamètre centré sur le rectangle englobant de la zone n’atteint la zone d’aucune cible sans lien avec elle, ni le cercle d’une autre cible trop petite), l’exception en ligne pour une cible dans une phrase, un lien ou un bouton inséré dans le texte (le segment de son bloc conteneur compris entre deux retours à la ligne contient, hors de toute cible, du texte comportant une lettre ou un chiffre), ou le dimensionnement par l’agent utilisateur (une case à cocher ou un bouton radio natif non stylé, détecté parce que appearance n’a pas été réinitialisé à none). Une cible trop petite et trop proche d’une cible voisine échoue. Lorsqu’une exception peut s’appliquer sans pouvoir être confirmée (deux liens en ligne serrés l’un contre l’autre avec seulement des séparateurs entre eux, comme dans « Edit | Delete », ou une cible à l’intérieur d’un SVG, d’un canvas ou d’une carte-image qui peut être essentielle), le résultat est cantTell plutôt qu’une supposition. Marge (target-size-px) : parmi les cibles qui mesurent au moins 24 par 24, la plus petite, exprimée par le côté du plus grand carré qui y tient, comparé à 24 (pour un rectangle, la plus petite de sa largeur et de sa hauteur) ; context.widthPx et context.heightPx donnent son étendue. Une cible de moins de 24 qui passe grâce à l’exception d’espacement n’est pas candidate. Seule une cible à moins de 6px de 24 (jusqu’à 30) compte comme proche : une page dont la plus petite cible est plus grande ne donne donc aucune marge. measuredCount compte toutes les cibles mesurées.
Ce que rapporte un constat.
metrics.widthPx,metrics.heightPx: l’étendue de la zone qu’un pointeur peut atteindre, en pixels CSS ;metrics.squarePx: le côté du plus grand carré qui y tient, comparé àmetrics.minSizePx(24). Arrondi au dixième, mais par défaut là où l’arrondi atteindrait la limite, si bien qu’une taille inférieure à 24 ne s’affiche jamais comme 24.metrics.decidedBy: ce qui a établi que la cible était trop proche d’une autre :centerDistance, le cercle d’une autre cible trop petite, ouregionDistance, la zone d’une autre cible à l’intérieur du cercle.metrics.centerDistancePx,metrics.minDistancePx(centerDistance) : la distance entre le centre de la cible et celui de sa voisine, comparée aux 24px nécessaires.metrics.regionDistancePx,metrics.minDistancePx(regionDistance) : la distance entre la zone de la voisine et le centre de la cible, comparée au rayon de 12px du cercle.conflictWith: un sélecteur pour la voisine dont elle est trop proche.measured.width,measured.height,measured.square: l’étendue de la zone et le plus grand carré, non arrondis.viewport.width,viewport.height: le viewport dans lequel la page a été mise en page, en pixels CSS. Une page responsive peut dimensionner ou placer une cible différemment à une autre largeur.
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Marge. Cette règle mesure target-size-px en pixels CSS, et la valeur doit atteindre le seuil. Quand une réussite est passée près du seuil, le champ margin du résultat désigne l’élément qui s’en est le plus approché tout en le respectant, si bien qu’un résultat qu’un petit changement ferait basculer se voit avant de basculer. Contrairement aux champs d’un constat, c’est un contrat stable. Voir Schéma de sortie.
Exemples
<button style="width:24px; height:24px;">+</button>
Atteint à elle seule le minimum de 24×24 pixels CSS.
<button style="width:10px; height:10px; padding:0;">A</button><button style="width:10px; height:10px; padding:0; margin-left:5px;">B</button>
Les deux cibles mesurent 10×10, moins de 24×24, et leurs centres sont à 15px l’un de l’autre, plus près que les 24px qu’exige l’exception d’espacement. (padding:0 compte : le padding par défaut d’un bouton dans le navigateur élargit chacune d’elles.)