Chapitre 13.1 — Cibles tactiles

⏱️ TL;DR — Une cible tactile (bouton, lien, icône cliquable) doit mesurer au moins 24×24 px CSS (critère 2.5.8, AA, WCAG 2.2), et 44×44 px est la bonne pratique historique (recommandations Apple/Google, et critère 2.5.5 AAA). Ce qui compte autant que la taille : l’espacement entre cibles, pour éviter les erreurs de tap. Une petite icône « poubelle » de 16 px collée à un autre bouton est un piège pour un doigt, surtout en cas de tremblement ou de mouvement (bus, marche).

🎯 Objectifs

• Connaître la taille minimale d’une cible tactile et la cible à viser.
• Comprendre pourquoi l’espacement est aussi important que la taille.
• Corriger une petite icône cliquable pour la rendre facile à toucher.
• Relier la taille des cibles aux handicaps moteurs et aux contextes situationnels.

Pourquoi la taille compte

Sur desktop, un curseur de souris pointe un pixel précis. Au doigt, la zone de contact fait facilement 8 à 10 mm — bien plus qu’une icône de 16 px. Ajoute un handicap moteur (tremblements, spasticité, arthrose), ou un contexte situationnel (tu tapes d’une main en marchant, dans un train qui secoue), et une cible trop petite devient impossible à activer sans erreur.

Le critère 2.5.8 Taille de la cible (minimum) (AA, WCAG 2.2) fixe le plancher : 24×24 px CSS. C’est un minimum, pas un objectif. La bonne pratique reste 44×44 px (Apple recommande 44 pt, Google Material 48 dp) — c’est aussi ce que demande le critère 2.5.5 Taille de la cible (améliorée) au niveau AAA.

♿ Côté utilisateur — Pour une personne atteinte de la maladie de Parkinson, une cible de 16 px entourée d’autres cibles, c’est la loterie : un tap sur deux tombe à côté, active le mauvais bouton, et il faut annuler puis recommencer. Passer à 44 px avec un peu d’espace transforme une tâche stressante en geste banal. La même interface, deux niveaux de fatigue radicalement différents.

Le mauvais exemple : l’icône minuscule

<!-- ❌ Cible de 16×16 px : trop petite, difficile à toucher -->
<button class="icon-delete" aria-label="Supprimer">
  <svg width="16" height="16"><!-- … --></svg>
</button>

/* ❌ La cible réelle fait la taille de l'icône : 16×16 px */
.icon-delete {
  padding: 0;
  border: none;
  background: none;
}

Ici la zone cliquable se limite au SVG de 16 px. Rien pour absorber l’imprécision du doigt.

Le bon exemple : agrandir la cible, pas forcément l’icône

Tu n’as pas besoin de grossir l’icône visuellement : tu agrandis la zone tactile autour, avec du padding et une taille minimale.

/* ✅ La cible fait au moins 44×44 px, l'icône reste petite */
.icon-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 14px;      /* 16 + 14 + 14 = 44 */
  border: none;
  background: none;
}

L’icône garde son aspect fin, mais le doigt dispose de 44 px de marge d’erreur. Vérifie la taille réelle avec les outils de développement (la « box » de l’élément), pas à l’œil.

⚠️ Piège — Croire qu’un padding invisible ne sert à rien parce qu’« on ne le voit pas ». La zone cliquable, elle, se voit au toucher : c’est exactement là que se joue l’accessibilité tactile. Une cible de 24 px qui paraît petite mais s’active du premier coup vaut mieux qu’une belle icône fine impossible à viser.

L’espacement : le facteur oublié

Deux cibles de bonne taille mais collées provoquent quand même des erreurs : le doigt déborde sur la voisine. Le critère 2.5.8 en tient compte — une cible plus petite que 24 px peut être conforme si un espacement suffisant l’entoure (un cercle de 24 px de diamètre ne chevauche aucune autre cible). En clair : taille et espacement travaillent ensemble.

/* ✅ De l'air entre les actions d'une barre d'icônes */
.toolbar {
  display: flex;
  gap: 8px;           /* les cibles ne se touchent pas */
}
.toolbar button {
  min-width: 44px;
  min-height: 44px;
}

Méfie-toi surtout des listes denses (lignes d’un tableau avec « éditer / dupliquer / supprimer »), des paginations (numéros de page minuscules) et des liens dans un paragraphe empilés les uns sous les autres.

🧭 Sur A11yLearn — Sur la liste des cours d’A11yLearn, chaque carte a trois actions : « Reprendre », « Marquer terminé » et une icône « favori ». En version desktop, elles tenaient dans 20 px de haut, serrées. Sur mobile, on les a passées à des cibles de 44 px avec gap: 8px, et on a déplacé le « favori » dans un coin isolé de la carte. Résultat : plus de « j’ai marqué terminé alors que je voulais juste reprendre ».

Le lien avec le handicap moteur

La taille des cibles est d’abord une affaire de handicap moteur (Partie 1). Une personne qui utilise le tactile avec un stylet tenu à la bouche, un doigt unique, ou qui compose avec des tremblements, dépend entièrement de cibles généreuses. Mais comme le trottoir abaissé, ça profite à tout le monde : au parent qui tient son enfant d’une main, à l’utilisateur pressé, à celui dont l’écran est fissuré. Grandes cibles = moins d’erreurs pour tous.

📚 Aller plus loin — Critère 2.5.8 Target Size (Minimum) (AA, WCAG 2.2, 24×24 px) et 2.5.5 Target Size (Enhanced) (AAA, 44×44 px) sur w3.org/WAI. Côté plateformes : Apple Human Interface Guidelines (44 pt) et Material Design (48 dp) donnent les mêmes ordres de grandeur.

✏️ Exercices

Exercice 1 — Corrige la cible. Une icône « partager » est rendue par un <button> sans padding autour d’un SVG de 20×20 px. Donne le CSS qui la rend conforme sans agrandir le dessin.

.icon-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 12px;   /* 20 + 12 + 12 = 44 */
}

Exercice 2 — Audite une barre d’actions. Une ligne de tableau affiche [✏️][📄][🗑️], trois <button> de 24×24 px sans espace entre eux. Est-ce conforme ? Que corriges-tu ?

🧠 Quiz de révision

Chapitre suivant : Gestes & pointeur — pourquoi tout swipe ou pincement doit avoir une alternative simple, et comment gérer l’annulation du pointeur.