Taille cible tactile et accessibilité : la règle des 24 × 24 px du critère WCAG 2.5.8

Ce que dit le critère 2.5.8 sur la taille cible tactile

L'objectif affiché par le W3C est simple : rendre les contrôles plus faciles à activer. Concrètement, il s'agit de garantir qu'une cible peut être activée facilement sans déclencher par accident une cible voisine. Les personnes ayant des limitations de dextérité ou des difficultés de motricité fine peinent à viser précisément de petites cibles lorsque d'autres cibles sont trop proches.

Le W3C cite explicitement les tremblements des mains, la spasticité et la quadriplégie parmi les handicaps concernés. Certaines personnes utilisent aussi des dispositifs de saisie spécialisés à la place d'une souris ou d'un pavé tactile, qui offrent généralement moins de précision que les dispositifs de pointage courants. Respecter le critère rend en outre les interfaces tactiles plus faciles à utiliser.

Point important : le critère définit une taille minimale et, à défaut, un espacement minimal. Il reste donc possible d'avoir de très petites cibles et d'être conforme, à condition qu'aucune cible adjacente ne soit trop proche. Le W3C recommande néanmoins, comme bonne pratique, d'atteindre au moins la taille minimale quel que soit l'espacement, et d'envisager le critère plus strict 2.5.5 « Taille de la cible (renforcée) » pour les liens et contrôles importants.

Parmi les personnes qui en bénéficient, sans s'y limiter :

• Personnes utilisant un appareil mobile dont l'écran tactile est le mode d'interaction principal
• Personnes ayant des troubles de la mobilité, comme des tremblements des mains, qu'elles utilisent une souris, un stylet ou le tactile
• Personnes exposées à des secousses, par exemple dans les transports en commun
• Personnes qui utilisent leur appareil d'une seule main
• Personnes aux doigts larges, ou qui utilisent seulement une partie du doigt ou une articulation

Comment mesurer une cible de 24 × 24 pixels CSS

Pour qu'une cible fasse « au moins 24 par 24 pixels CSS », il doit être possible de dessiner un carré plein de 24 par 24 pixels CSS, aligné sur les axes horizontal et vertical, entièrement contenu dans la cible. La cible elle-même peut être inclinée : c'est le carré qui doit rester aligné avec la page. Attention aux coins arrondis : sur un bouton de petite taille, ils peuvent empêcher de loger ce carré, et la cible est alors considérée comme sous-dimensionnée.

Le pixel CSS est l'unité canonique de mesure en CSS. Il est indépendant de la densité d'affichage et distinct des pixels matériels de l'écran. Surtout, l'exigence ne dépend pas du facteur de zoom : quand l'utilisateur zoome, la taille en pixels CSS des éléments ne change pas. Vous ne pouvez donc pas invoquer le zoom pour justifier qu'une cible deviendrait assez grande.

Quelques règles de mesure issues de la documentation du W3C méritent d'être connues avant tout audit :

• Si deux cibles se chevauchent, la zone de chevauchement ne devrait pas être comptée dans la taille, sauf si elles déclenchent la même action ou ouvrent la même page.
• Une cible où l'on choisit une valeur selon la position (curseur de type slider, sélecteur de couleur en dégradé, zone d'édition où l'on place le curseur) compte comme une seule cible.
• Les cibles masquées par un contenu apparu après une interaction ou un script (liste de suggestions d'une combobox, fenêtre modale, bannière de cookies, sondage) ne sont pas concernées tant qu'elles sont masquées.
• En revanche, les cibles présentes dans ce nouveau contenu affiché par-dessus doivent, elles, respecter le critère.

L'exception d'espacement : la méthode du cercle de 24 px

Une cible de moins de 24 par 24 pixels CSS est dite sous-dimensionnée. Elle peut encore passer grâce à l'espacement : on centre un cercle imaginaire de 24 pixels CSS de diamètre sur la boîte englobante de la cible, et ce cercle ne doit croiser ni une autre cible, ni le cercle d'une autre cible sous-dimensionnée. Pour une cible rectangulaire, la boîte englobante coïncide avec la cible. Pour une forme découpée, arrondie ou un SVG cliquable complexe, il faut d'abord déterminer la boîte englobante puis son centre, qui peut même se trouver hors de la cible pour une forme concave.

Le W3C explique que les écrans tactiles et les agents utilisateurs disposent généralement d'heuristiques pour identifier le lien ou le contrôle le plus proche du point de contact, si bien qu'un espacement suffisant peut être aussi efficace qu'une cible plus grande. Les exemples du W3C permettent de calibrer vos contrôles :

• Une rangée de six boutons-icônes de 24 × 24 px : conforme.
• Les mêmes boutons en 20 × 20 px avec 4 px d'espace entre eux : conformes via l'exception d'espacement.
• Les mêmes boutons en 20 × 20 px sans espace : non conformes, car les cercles se croisent.
• Des boutons de 16 px de haut sans cible au-dessus ni au-dessous : conformes ; deux rangées empilées avec seulement 1 px d'écart : non conformes.
• Des éléments de menu de 24 px de haut (texte et marge interne) : conformes ; à 18 px de haut : non conformes.
• Une petite cible de 16 × 16 px collée à une grande cible (une image cliquable, par exemple) : non conforme ; l'ajout d'un écart de 4 px la rend conforme.

Les quatre autres exceptions : équivalent, inline, agent utilisateur, essentiel

Au-delà de l'espacement, le critère prévoit quatre exceptions. Chacune a un périmètre précis, qu'il vaut mieux documenter dans votre audit plutôt que de l'invoquer par défaut.

Pour l'exception « essentiel », le W3C encourage fortement les auteurs à fournir, autant que possible, une fonctionnalité équivalente par d'autres moyens.

• Équivalent : la fonction peut être obtenue par un autre contrôle, sur la même page, qui respecte le critère.
• Inline : la cible se trouve dans une phrase, ou sa taille est contrainte par la hauteur de ligne du texte qui n'est pas une cible. Raison invoquée : la redistribution du texte selon la taille de la fenêtre d'affichage empêche de prévoir où les liens peuvent se trouver les uns par rapport aux autres, et il est plus important de régler la hauteur de ligne pour la lisibilité. La hauteur de ligne devrait s'interpréter perpendiculairement au sens du texte : pour une langue affichée verticalement, elle est donc horizontale.
• Contrôle de l'agent utilisateur : la taille est déterminée par l'agent utilisateur (par exemple le navigateur) et n'a pas été modifiée par l'auteur, comme le calendrier d'un champ input type="date" ou les barres de défilement. Si vous redimensionnez une barre de défilement, il faut un espacement suffisant entre elle et le contenu.
• Essentiel : une présentation particulière est essentielle ou légalement requise pour l'information transmise. Exemples du W3C : les épingles d'une carte numérique, une visualisation de données interactive nécessairement dense, ou des formulaires en ligne qu'une juridiction exige de calquer sur des formulaires papier, ce qui peut contraindre la taille des cibles : l'obligation légale de reproduire de petites cibles peut alors être considérée comme essentielle.

Corriger en CSS : la technique suffisante C42

Le W3C cite une technique suffisante pour ce critère : C42, qui consiste à utiliser min-height et min-width sur le conteneur de la cible afin de garantir un espacement suffisant. L'exemple ci-dessous applique ces propriétés à une barre d'icônes. Rappelez-vous que la cible est la région de l'affichage qui accepte l'action du pointeur : si le conteneur n'est pas lui-même cliquable, ses dimensions minimales visent à assurer l'espacement autour d'une cible plus petite, pas à agrandir la cible. Pour agrandir réellement la zone active, appliquez min-width et min-height à l'élément cliquable lui-même (le bouton ou le lien).

La documentation indique aussi qu'il peut être utile de proposer une option permettant d'agrandir la zone active sans agrandir la cible visible, ou un mécanisme de réglage de la densité de la mise en page. Les besoins diffèrent selon les utilisateurs : une personne ayant une perte de champ visuel peut préférer une mise en page condensée avec de petits contrôles, tandis que d'autres personnes malvoyantes peuvent préférer de grands contrôles.

/* Technique C42 : min-width / min-height sur le conteneur
   de la cible, pour garantir un espacement suffisant
   autour d'un bouton plus petit */
.toolbar li {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Variante : agrandir la zone active elle-même,
   en dimensionnant l'élément cliquable */
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Checklist pour auditer la taille des cibles tactiles

Pour passer le critère en revue sur une page, procédez dans l'ordre suivant, en commençant par les zones denses : barres d'outils, pagination, menus, boutons de fermeture et icônes posées sur des images. Si votre référentiel de travail est le RGAA, consultez nos pages sur le RGAA 5 et sur la différence entre RGAA et WCAG, puis lancez un test gratuit de vos pages et mettez en place une surveillance continue pour repérer les régressions.

• Listez les cibles activables au pointeur : liens, boutons, champs, icônes cliquables.
• Pour chacune, vérifiez qu'un carré de 24 × 24 pixels CSS aligné sur les axes tient entièrement dans la cible.
• Pour chaque cible sous-dimensionnée, centrez un cercle de 24 px sur sa boîte englobante et vérifiez qu'il ne croise ni une autre cible ni un autre cercle.
• Écartez les liens situés dans des phrases (exception inline) et les contrôles dont la taille est fixée par l'agent utilisateur (le navigateur, par exemple) et non modifiée par l'auteur, comme le calendrier d'un champ date ou les barres de défilement (exception agent utilisateur).
• Vérifiez si une fonction réalisée par une petite cible est disponible via un autre contrôle conforme sur la même page.
• Contrôlez aussi le contenu qui s'affiche par-dessus la page : modales, bannières de cookies, listes de suggestions.

Questions fréquentes

À lire aussi sur Conformly

• Tout savoir sur le RGAA 5
• Différences entre RGAA et WCAG
• Scanner RGAA gratuit en ligne

Sources

Article appuyé sur les sources officielles citées en fin de page.

• W3C — Comprendre 2.5.8