Indices visuels

Les cibles tactiles doivent être assez grandes

Règle: target-size
Gravité: Sérieux
Niveau WCAG AA

Pourquoi c’est important

Un composant plus petit que 24 sur 24 pixels CSS est difficile à atteindre en cas de tremblement, de dextérité réduite, ou simplement avec le pouce dans un train. Une frappe manquée déclenche souvent le composant voisin.

Comment corriger

Portez les cibles interactives à au moins 24 sur 24 pixels CSS.
Si l’icône visible doit rester petite, agrandissez la zone de clic avec du padding, sans changer le design.
Sinon, laissez assez d’espace autour pour que les cercles de 24 px ne se chevauchent pas.

Dans le balisage

Échoue

.icon-button { width: 18px; height: 18px; }

Réussit

.icon-button { width: 24px; height: 24px; } /* or add spacing around it */

Ce que le contrôle ne peut pas juger

La règle prévoit des exceptions que le moteur ne sait pas toujours juger : un lien au fil d’une phrase, ou une cible suffisamment espacée. Vérifiez les éléments signalés avant de les traiter comme des défauts.

L’exigence sous-jacente

Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :

2.5.8 Taille de la cible (minimum) (s’ouvre dans un nouvel onglet) — Niveau WCAG AA

Pour aller plus loin

Deque University sur target-size (s’ouvre dans un nouvel onglet)

Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.