- Rendre les boutons/liens/cartes plus faciles à cliquer, toucher ou tapoter, avec une taille qui limite aussi les erreurs d’appui
- Les appellations de la « taille de cible » varient : Apple parle de hit target, Google Material de Touch target, le WAI de target size, Google Lighthouse de Tap Target, et la communauté design de Clickable Area
- Selon les critères WCAG, la taille de cible doit être d’au moins 44 x 44 pixels CSS (48x48 sur Android)
- En dessous, les cercles de toucher peuvent se chevaucher et provoquer des clics involontaires
- Google Design for Driving recommande un minimum de 76dp x 76dp
- Il est préférable de fournir un retour visuel sur la cible (bordure de l’élément ou inversion de l’arrière-plan)
- Pour les cibles plus petites que 24x24, il faut prévoir un espacement suffisant (Line Height : 1.4, Padding: 1rem, etc.)
- Pour les barres de progression aussi, il vaut mieux augmenter la hauteur afin d’offrir une zone tactile suffisante
- Entre les éléments qui déclenchent la même action, supprimer les Dead Target Area
- Utiliser des pseudo-éléments comme
:before et :after pour agrandir la taille de cible
- Sur les
label, ajouter impérativement for pour étendre la zone de cible
- Pour les cases à cocher, utiliser
padding-block afin d’augmenter la taille de cible
- Ajouter aussi du padding aux boutons et aux liens texte
- Pour les éléments de liste, utiliser du padding et
display:flex afin d’étendre la taille à l’ensemble de l’élément
- Méthodes de test de la taille de cible : utiliser les DevTools, appliquer un contour CSS, ou utiliser le navigateur Polypane
1 commentaires
Le contenu est excellent, et en voyant l’auteur, je me suis dit : Ahmad Shadeed, bien sûr. Quand on lit ses articles, on ne peut qu’être admiratif.