Taille des zones tactiles : pourquoi 24 px, c'est trop petit, et la règle des 44 pt et 48 dp
Une icône de 24 px, ça va. Une zone de tap de 24 px, non. Apple demande 44 pt, Android 48 dp, et les 24 px de WCAG ne sont qu'un plancher. Quatre correctifs reconstruits côte à côte, et le code à donner à votre développeur.
Une icône de 24 px, ça va. Une zone de 24 px sur laquelle taper, non. On utilise le bout du doigt, souvent d'une seule main et en mouvement, et une cible aussi petite est ratée ou touche sa voisine. Dessinez l'icône petite et la cible grande, et suivez les chiffres ci-dessous.
Pourquoi 24 px est le chiffre que tout le monde dessine
Les icônes sont dessinées en 24. Material Symbols, par exemple, est livré avec 24 px comme taille préférée. Alors un designer livre une icône de 24 px, un développeur fait un bouton de la taille de l'icône, et la zone de toucher finit de la taille d'un timbre-poste.
La seconde source de ce chiffre, c'est l'accessibilité. WCAG 2.2 demande des cibles de pointeur d'au moins 24 par 24 pixels CSS au niveau AA. C'est un minimum, et il vient avec des exceptions. Il est facile de lire un plancher comme un objectif, et un design posé pile sur le plancher passe un vérificateur tout en frustrant les gens.
Les quatre chiffres à connaître
| Source | Taille | De quoi s'agit-il |
|---|---|---|
| Apple, iOS et iPadOS | 44 par 44 pt | La taille de contrôle par défaut |
| Apple, iOS et iPadOS | 28 par 28 pt | La plus petite taille de contrôle |
| Android, Material | 48 par 48 dp | La cible tactile recommandée |
| WCAG 2.2, 2.5.8 (AA) | 24 par 24 px CSS | Le minimum, avec exceptions |
| WCAG 2.2, 2.5.5 (AAA) | 44 par 44 px CSS | La cible renforcée |
Le conseil d'Apple est direct : un bouton a besoin d'une zone de toucher d'au moins 44 par 44 points. Les points, les dp et les pixels CSS sont tous des unités indépendantes de la densité, donc les designers les utilisent côte à côte sur une même grille, comme le fait l'image.
Une des exceptions de WCAG mérite d'être connue. Deux cibles trop petites sont autorisées si un cercle de 24 px centré sur chacune ne touche pas l'autre cible. C'est une règle d'espacement, et c'est pourquoi une rangée de minuscules icônes bien espacées peut passer alors que les mêmes icônes serrées échouent.
Correctif 1 : étendre l'icône à 44
Zone de toucher 24 x 24
Zone de toucher 44 x 44
La zone de toucher est le cadre du bouton, pas l'image qu'il contient. Le correctif consiste donc à dimensionner le bouton, pas l'icône : gardez le glyphe à 24 et donnez au bouton au moins 44 de chaque côté. Cela vaut pour tous les petits contrôles isolés : la flèche de retour, les boutons partager et plus dans une barre d'outils, le bouton d'info sur une ligne, une étoile de favori, une case à cocher, le plus et le moins d'un stepper.
Quand deux d'entre eux sont côte à côte, les boîtes peuvent se toucher. Ce n'est pas grave, car des boîtes qui se touchent ne laissent aucun espace à rater.
Correctif 2 : rendre toute la ligne tappable
Interrupteur seul
Ligne entière
La ligne est déjà là, déjà lisible, et bien plus grande que 44. Enveloppez le libellé et le contrôle dans un seul élément tappable pour que toute la ligne bascule. Cela aide aussi les personnes qui utilisent un lecteur d'écran ou un accès par commutateur, car il y a un seul contrôle avec un seul nom, et non un libellé et un interrupteur solitaire.
Correctif 3 : donner au bouton de fermeture une vraie cible
16 x 16
44 x 44
Il en va de même pour le bouton de rejet d'une bannière, le bouton d'effacement dans un champ de recherche et la petite icône de suppression sur un tag. Dessinez le symbole léger et la cible lourde.
Correctif 4 : mettre l'action principale en bas
Coin supérieur
En bas, pleine largeur
C'est une règle de design, pas une statistique mesurée : l'idée est que l'emplacement d'un contrôle compte autant que sa taille. L'action principale va en bas et en large. Annuler et les autres actions secondaires peuvent rester dans la barre du haut.
Comment le construire
Sur le web, dimensionnez le bouton, pas l'icône :
.icon-button {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
}
.icon-button svg { width: 24px; height: 24px; }
/* one tappable row: label and switch together */
.row { display: flex; align-items: center; min-height: 44px; }
Sur Android, le conseil de Google est d'utiliser android:minWidth et android:minHeight pour fixer une limite basse quand un contrôle se dimensionne d'après son contenu :
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="48dp"
android:minHeight="48dp" />
Sur iOS avec SwiftUI, donnez un cadre au contrôle et faites répondre tout le cadre :
Button(action: close) { Image(systemName: "xmark") }
.frame(minWidth: 44, minHeight: 44)
.contentShape(Rectangle())
Ces trois extraits sont nos exemples de la règle, pas du code copié d'une plateforme.
Vérifiez vos propres écrans en cinq minutes
- Dans votre fichier de design, dessinez chaque élément tappable comme une boîte de 44 par 44, par-dessus l'icône. Toute boîte qui ne rentre pas est une cible à agrandir.
- Lignes de liste, onglets, chips et contrôles de pagination : l'élément entier est-il tappable, ou seulement la partie avec le mot ?
- Trouvez chaque contrôle de fermeture, d'effacement et de suppression. Chacun a besoin de ses propres 44.
- Trouvez l'unique action principale de chaque écran. Est-elle là où se trouve le pouce ?
- Sur un vrai téléphone, d'une seule main, parcourez le flux principal. Tout ce que vous ratez deux fois est trop petit.
FAQ
Quelle est la taille minimale d'une zone tactile ?
Sur iPhone, la valeur par défaut d'Apple est de 44 par 44 points et la plus petite taille de contrôle est de 28 par 28. Sur Android, la recommandation est de 48 par 48 dp. Sur le web, WCAG 2.2 fixe un minimum de 24 par 24 pixels CSS au niveau AA, avec des exceptions.
Quelle taille doit avoir un bouton sur mobile ?
Au moins 44 par 44 points sur iOS et 48 par 48 dp sur Android, en largeur comme en hauteur. Un bouton principal pleine largeur en bas de l'écran dépasse déjà largement les deux.
L'icône elle-même doit-elle faire 44 px ?
Non. L'icône peut rester à 24 px ou moins. Ce qui doit faire 44, c'est la zone qui répond au tap, soit le bouton autour de l'icône. Ajoutez du padding ou une largeur et une hauteur minimales au bouton.
Une cible de 24 par 24 px suffit-elle pour WCAG ?
Pour le niveau AA, oui, dans la plupart des cas : le critère demande au moins 24 par 24 pixels CSS, avec des exceptions pour l'espacement, les liens en ligne et quelques autres. Le niveau renforcé, AAA, demande 44 par 44. Passer l'AA est un minimum de conformité, pas une bonne taille pour concevoir.
Quelle est la différence entre pt, dp et px ?
Ce sont toutes des unités indépendantes de la densité. Un point est l'unité d'iOS, un dp celle d'Android et un pixel CSS celle du web. Elles ne sont pas physiquement identiques, mais les designers les disposent sur la même grille, donc 44 pt et 48 dp sont traités comme des tailles à peu près équivalentes.
Où placer le bouton principal sur un téléphone ?
En bas de l'écran, pleine largeur, là où repose le pouce. Mettez les actions secondaires comme Annuler dans la barre du haut. C'est une règle empirique de mise en page, pas un chiffre mesuré.
Sources
- Apple Human Interface Guidelines, Accessibility : taille de contrôle par défaut sur iOS et iPadOS 44 par 44 points, taille minimale de contrôle 28 par 28 points.
- Apple Human Interface Guidelines, Buttons : un bouton a besoin d'une zone de toucher d'au moins 44 par 44 points.
- Android Accessibility Help, Touch target size : au moins 48dp de large et de haut, et
android:minWidthetandroid:minHeightcomme limite basse pour les contrôles dimensionnés par leur contenu. - W3C, WCAG 2.2, 2.5.8 Target Size (Minimum) : au moins 24 par 24 pixels CSS en AA, y compris l'exception d'espacement, et 2.5.5 Target Size (Enhanced) : 44 par 44 en AAA.
- Google Fonts, Material Symbols guide : 24 px comme taille d'icône préférée.
- Les écrans ci-dessus sont nos propres exemples. Le conseil de placement en bas est une règle de design, pas une statistique.
- Plus de posts à une règle comme celui-ci sur UX Brainy.
Want every tap in your app to land the first time? Our team designs and builds mobile UI with the hit areas decided once, in the system.
Get Started
