Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →
Responsive
Quelle doit être la taille minimale des boutons sur un site web ?
Les boutons et les liens doivent faire au moins 24 par 24 pixels — c'est ce que demande la règle d'accessibilité WCAG 2.5.8. Les surfaces plus petites sont difficiles à frapper avec le doigt: celui qui appuie à côté du téléphone se retrouve sur le mauvais lien ou abandonne. Le service de contrôle mesure chaque surface d'interaction sur quatre tailles d'appareil et montre des exemples des surfaces trop petites avec taille mesurée.
Ces surfaces comptent comme surfaces d'interaction
Tout ce que les visiteurs peuvent cliquer ou appuyer est mesuré: les boutons, les liens, les champs de saisie et les listes de sélection. Les liens au milieu du texte courant en sont exempts — leur hauteur est donnée par la ligne de texte, la norme l'autorise explicitement. Les éléments d'aide invisibles de quelques pixels de taille que certains sites construisent pour les lecteurs d'écran ou pour les statistiques en sont également exempts; ce ne sont pas des cibles pour le doigt et les compter créerait une fausse alerte. Restent exactement les surfaces qu'un humain doit vraiment frapper: le bouton de commande, l'élément de menu, le symbole de recherche, le champ d'adresse e-mail. Pour chacune de ces surfaces, la limite inférieure est de 24 par 24 pixels.
C'est ainsi que le service de contrôle mesure la taille
La page est construite sur quatre tailles d'appareil dans un vrai navigateur: téléphone avec 390, tablette avec 768, bureau avec 1440 et large avec 1920 pixels de largeur. Sur chaque taille, l'audit mesure la largeur et la hauteur réellement affichées de chaque surface d'interaction. C'est décisif, car le même bouton peut être assez grand au bureau et rétrécir sur le téléphone. Chaque constat est relevé deux fois; seul ce que les deux mesures voient de façon cohérente est signalé. Le rapport montre jusqu'à trois exemples avec taille mesurée — par exemple un bouton avec 18 par 18 pixels — et une capture d'écran de l'endroit affecté, pour que la surface soit trouvée sans recherche.
C'est ce que la taille minimum apporte à vos visiteurs
Les grandes surfaces d'interaction aident en premier les personnes qui tremblent, celles ayant une motricité fine limitée ou les plus grands doigts. Mais elles aident tout le monde: dans le train en marche, avec des gants, du pouce d'une seule main libre. Celui qui frappe un bouton du premier coup reste dans le flux — celui qui tape trois fois à côté quitte la page. Pour une entreprise, cela signifie concrètement: le bouton « Demander une offre » est appuyé plus souvent s'il est facile à frapper. Les 24 pixels sont la limite inférieure de la norme et pas une valeur idéale; beaucoup de concepteurs choisissent délibérément des surfaces beaucoup plus grandes, surtout pour le bouton principal d'une page.
- Appuyez sur les boutons les plus importants de votre site Web sur le téléphone avec le pouce et vérifiez si vous les frappez du premier coup.
- Portez une attention particulière aux petits symboles : loupe, menu, combiné téléphonique, flèches dans les galeries d'images.
- Transmettez à votre agence les exemples du rapport de contrôle — la taille mesurée de chaque surface trop petite y est indiquée.
- Prévoyez dès le départ que les nouveaux boutons fassent au minimum 24 par 24 pixels.