# Zones tactiles et accessibilité mobile : la règle des 24 pixels de WCAG 2.2

> Un bouton trop petit sur mobile ne gêne pas que les personnes à mobilité réduite. Le nouveau critère WCAG 2.2 sur la taille des cibles fixe enfin un seuil objectif à respecter.

- Auteur : Clément Hadrot
- Publié le : 2024-01-11
- Mis à jour le : 2024-01-11
- Catégorie : Accessibilité
- URL : https://wpmoderne.dev.wordpress-developpement.fr/accessibilite/zones-tactiles-24-pixels-wcag-22-wordpress/

## L’essentiel

- 24 par 24 pixels CSS, le seuil minimal fixé par le critère 2.5.8
- Les icônes de réseaux sociaux du footer sont presque toujours trop petites
- Un espacement suffisant peut compenser une cible plus petite

Combien de fois un visiteur a-t-il pesté contre une icône de réseau social trop petite, en essayant vainement de toucher exactement le bon pictogramme au milieu de trois autres collés les uns aux autres dans le pied de page d'un site ? Ce défaut d'ergonomie, longtemps traité comme un simple détail de design, a désormais un statut officiel dans le référentiel WCAG : depuis la version 2.2, publiée en octobre 2023, le critère 2.5.8 Taille des cibles fixe un seuil chiffré et vérifiable.

Ce critère, de niveau AA, concerne directement l'ergonomie mobile d'un site WordPress, un domaine où l'accessibilité et l'expérience utilisateur générale se recoupent presque entièrement : ce qui aide une personne à mobilité réduite à toucher un bouton du premier coup aide tout autant un utilisateur pressé, ou simplement un utilisateur avec de grands doigts sur un petit écran.

## Le seuil et ses exceptions

Le critère impose qu'une cible interactive mesure au moins 24 par 24 pixels CSS, sauf dans quatre cas précis prévus par le texte : la cible est un élément intégré dans une phrase de texte courant (un lien au sein d'un paragraphe, par exemple) ; la taille est déterminée par l'agent utilisateur et non par le site (un bouton natif du navigateur) ; une présentation alternative équivalente existe déjà ailleurs sur la page ; ou la cible, bien que plus petite que 24 pixels, est entourée d'un espace suffisant pour qu'un cercle de 24 pixels centré sur elle ne chevauche aucune autre cible.

Cette dernière exception, l'espacement compensatoire, offre une marge de manœuvre appréciable pour un design déjà figé : une icône de 20 pixels peut rester conforme si elle dispose d'une marge suffisante avec ses voisines, sans avoir à être agrandie elle-même.

## Les zones d'un site WordPress les plus concernées

> L'essentiel à retenir : 24 par 24 pixels CSS, le seuil minimal fixé par le critère 2.5.8 ; Les icônes de réseaux sociaux du footer sont presque toujours trop petites ; Un espacement suffisant peut compenser une cible plus petite

- Les icônes de réseaux sociaux du pied de page, souvent alignées sans espacement
- Les puces de pagination d'un carrousel ou d'une galerie d'images
- Les boutons de fermeture (croix) des popups et bannières de cookies
- Les cases à cocher et boutons radio personnalisés, souvent réduits par le CSS d'un thème
- Les flèches de navigation d'un slider, redimensionnées à quelques pixels sur mobile

## Corriger sans reconstruire tout le design

La correction ne demande presque jamais de refonte visuelle complète. Sur un icône trop petite, agrandir la zone cliquable au-delà de la taille visible de l'icône, via un padding généreux sur l'élément parent, permet de respecter le seuil sans changer l'apparence graphique.

```
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 10px;
}

.social-icons a svg {
  width: 16px;
  height: 16px;
}
```

Dans cet exemple, la zone cliquable réelle mesure 44 pixels (24 de largeur d'icône plus 10 de padding de chaque côté), largement au-dessus du seuil minimal, tandis que l'icône visible conserve une taille discrète de 16 pixels. Cette technique, agrandir la zone interactive sans agrandir l'élément visuel, est la solution la plus fréquemment applicable sans dénaturer un design existant.

## Un critère qui recoupe les recommandations tactiles historiques

Ce seuil de 24 pixels n'est pas une invention isolée du W3C : il rejoint des recommandations d'ergonomie mobile bien antérieures, notamment celles d'Apple (44 points) et de Google (48 dp) pour leurs interfaces natives respectives, des seuils historiquement plus élevés que celui finalement retenu par WCAG 2.2. Respecter ces recommandations de plateforme, déjà suivies par de nombreux designers d'interface mobile, garantit en pratique une large marge de conformité au critère WCAG.

> Une cible tactile trop petite n'est jamais un problème réservé à une minorité d'utilisateurs. C'est un problème qui touche tout le monde, avec une intensité variable selon la dextérité, la taille de l'écran, ou simplement la situation du moment : marcher, tenir un enfant, porter des gants.

## En résumé

Le critère 2.5.8 de WCAG 2.2 donne enfin un chiffre précis à une intuition ergonomique ancienne : les zones interactives d'un site doivent être suffisamment grandes pour être touchées sans erreur. Sur un site WordPress, un audit rapide des icônes de pied de page, des puces de carrousel et des boutons de fermeture de popup suffit généralement à identifier les corrections nécessaires, presque toujours réalisables sans toucher au design visuel du site.