Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →
Barrierefreiheit
Quelle doit être la taille minimale d'un bouton sur un site web ?
Un bouton doit faire au minimum 24 par 24 pixels — c'est ce qu'exige le critère 2.5.8 « Taille de cible (minimum) » nouvellement introduit avec WCAG 2.2. Les cibles plus petites manquent régulièrement aux personnes dont les mains tremblent ou aux doigts larges, particulièrement sur téléphone. Exceptions : les liens dans le texte courant et les petites cibles avec assez d'espace libre auprès des cibles voisines.
24 par 24 pixels : la limite inférieure pour atteindre
Une pression au doigt est moins précise qu'un clic souris, et avec un tremblement ou une dextérité réduite, la dispersion s'élargit encore. Si la cible est trop petite, la pression manque — au mieux, rien ne se passe, au pire, le lien voisin s'ouvre. Les zones de problème typiques sont les barres d'outils d'icônes serrées, les minuscules croix de fermeture sur les fenêtres d'avis et les champs de date dans les calendriers. Les 24 par 24 pixels sont là la limite inférieure, pas une mesure de confort. Deux exceptions prévoit le critère : les liens dans le texte courant peuvent suivre la taille du texte, et les petites cibles sont autorisées si assez d'espace libre reste autour, de sorte qu'aucune cible voisine n'est frappée par erreur.
Ainsi, le service de contrôle mesure les tailles de cible
Le service de contrôle mesure les éléments de commande visibles de la page — liens, boutons, champs de formulaire — dans leur taille réellement affichée, jusqu'à 300 cibles par page. À chaque cible trop petite, il applique les exceptions du critère : si elle est un lien dans le texte courant, elle ne compte pas ; s'il reste autour de son centre un cercle suffisant libre d'autres cibles, elle ne compte pas non plus. Si reste après au moins une cible sous 24 par 24 pixels, le critère est violé — le rapport nomme le nombre, le premier élément affecté et fournit une capture d'écran de preuve. L'étendue de l'échantillon est inscrite comme note de mesure dans le rapport.
Beispiele
Symbol-Links in einer Zeile
.symbol { width: 16px; height: 16px; margin: 0; }.symbol { width: 24px; height: 24px; }
/* oder: 16 px Symbol mit 8 px Abstand zum Nachbarn */Auf Stufe AA sind 24 × 24 CSS-Pixel die Grenze, oder ein Abstand, der einen 24-Pixel-Kreis um das Ziel frei hält. Links im Fließtext sind ausgenommen.
- Testez votre site web sur le téléphone avec le pouce : frappez-vous chaque symbole dans la zone supérieure au premier essai ?
- Agrandissez la surface de frappe des petits symboles par un espacement interne invisible — le symbole peut avoir l'air petit, la surface doit être grande.
- Testez les croix de fermeture des fenêtres d'avis et des bannières de cookies — elles sont parmi les plus petites cibles les plus fréquentes.
- Laissez assez d'espace libre entre les petites cibles voisines, si un agrandissement n'est pas possible gestaltéiquement.