Grands boutons sur téléphone : ce que disent vraiment les règles d’accessibilité
WCAG 2.2 ne dit pas simplement « faites de grands boutons ». Le critère AA de taille minimale considère une cible d’au moins 24×24 pixels CSS ou, dans des conditions définies, l’espace autour d’une cible plus petite. Le critère AAA renforcé utilise 44×44. Ce sont des seuils techniques, pas la promesse que chacun touchera sans erreur.
Mesurez la zone active, pas seulement le dessin
La cible est la région qui accepte le toucher ou une autre entrée de pointage. Une petite icône peut avoir une zone active plus grande ; une grande tuile peut n’être active qu’en partie. La mesure utilise les pixels CSS, distincts des pixels physiques.
Zoom, taille du doigt et diagonale du téléphone ne créent pas automatiquement la conformité. Vérifiez la zone effective dans chaque état, menu, superposition et orientation pris en charge.
Minimum AA : 24×24 pixels CSS ou espacement qualifié
WCAG 2.2 SC 2.5.8 exige au moins 24×24 pixels CSS. Une petite cible ne bénéficie de l’exception d’espacement que si des cercles imaginaires de 24 pixels CSS centrés sur les petites cibles ne coupent ni autre cible ni leurs cercles.
Les autres exceptions concernent commande équivalente, lien en ligne, taille imposée par l’agent utilisateur et présentation essentielle ou légale. Réussir grâce à une exception ne garantit pas le confort ; W3C recommande d’atteindre la taille minimale elle-même.
AAA porte la référence à 44×44
SC 2.5.5 Target Size (Enhanced) demande généralement 44×44 pixels CSS et prévoit ses propres exceptions. C’est un critère AAA plus exigeant, pas le minimum AA ni un chiffre universel.
Il peut guider une action importante. Mais grande zone, libellé clair et espace ne suffisent pas si les actions sont confuses, la mise en page bouge, la confirmation est obscure ou l’entrée différente.
Taille, distance et annulation agissent ensemble
La distance réduit l’activation voisine avec tremblement, mouvement d’un véhicule, usage à une main ou précision moindre. Ce sont des besoins et contextes possibles, pas des diagnostics à tirer d’une erreur.
SC 2.5.2 Pointer Cancellation traite aussi le moment d’activation : beaucoup d’actions doivent se terminer au relâchement et permettre annulation ou retour, sous réserve d’exceptions. Pour un signal important, vérifiez confirmation compréhensible et correction.
Matrice : conformité et expérience
La colonne pratique demande le produit réel et ne remplace pas un audit WCAG.
| Aspect | Règle ou seuil | Vérification pratique |
|---|---|---|
| Zone active | Cible réelle, pas seule icône | Toute la zone attendue répond-elle ? |
| Minimum AA | 24×24 CSS px | Reste-t-elle facile à atteindre ? |
| Espacement | Cercles de 24 px sans intersection | La cible voisine est-elle touchée ? |
| AAA renforcé | 44×44 CSS px | Convient-il à l’action principale ? |
| Libellés | Non résolus par la taille | Sens et résultat sont-ils distincts ? |
| Activation | Considérer Pointer Cancellation | Peut-on annuler avant relâchement ? |
| Confirmation | Selon risque et parcours | Évite-t-elle l’erreur sans bloquer ? |
| Adaptation | Texte et système changent | Zoom, rotation et grand texte fonctionnent ? |
| Entrée | Le toucher n’est qu’une méthode | Compatible avec les aides techniques ? |
| Contexte | WCAG ne prédit pas la personne | Testé avec utilisateurs et appareils pertinents ? |
Appliquer WCAG à une application native avec prudence
WCAG est une norme pour le contenu web. WCAG2ICT explique comment ses principes peuvent s’appliquer aux logiciels et documents non web, mais ne crée pas seul une déclaration de conformité pour toute application ou loi. Vérifiez le cadre applicable.
Pour My Safe Circle, examinez les actions principales sur l’appareil réel avec libellés, confirmations, destinataires et solution de repli. L’application facilite la communication avec des proches ; elle ne détecte pas automatiquement les événements, n’appelle pas les secours et ne garantit ni livraison ni action.
- Zone active mesurée en pixels CSS ou équivalent approprié ?
- Petites cibles vérifiées avec la règle d’espacement ?
- Exceptions documentées sans les appeler bonne UX ?
- Activation accidentelle, annulation et confirmation testées ?
- Utilisateurs, appareils, zoom et entrées pertinents inclus ?
Questions fréquentes
24×24 pixels CSS signifie-t-il qu’un bouton est accessible ?
La cible peut satisfaire le seuil dimensionnel AA si les autres exigences applicables sont respectées. Cela ne prouve ni lisibilité, ni compréhension, ni facilité pour tous.
44×44 est-il obligatoire pour WCAG 2.2 AA ?
Non. 44×44 relève du critère renforcé 2.5.5 niveau AAA ; le minimum 2.5.8 niveau AA utilise 24×24 avec des exceptions définies.
Un bouton plus grand élimine-t-il les touchers accidentels ?
Non. Il peut aider, mais distance, actions voisines, activation, confirmation, posture, appareil et variabilité individuelle comptent aussi.
Sources consultées
Les informations techniques et de sécurité ont été vérifiées dans les sources officielles suivantes.
- W3C — Target Size (Minimum), SC 2.5.8
- W3C — Target Size (Enhanced), SC 2.5.5
- W3C — Pointer Cancellation, SC 2.5.2
- W3C — WCAG2ICT pour logiciels non web
- W3C — utilisateurs âgés et accessibilité
- My Safe Circle — fonctions et limites
Transparence éditoriale : ce guide est publié par l’équipe de My Safe Circle. Il décrit les critères W3C et les limites du produit sans affirmer que son interface convient à tous ou respecte un régime juridique donné.
MESURER ET OBSERVER
Prenez le seuil comme base, puis testez l’expérience.
Vérifiez zone active, distance, erreurs et modes d’entrée.
Découvrir My Safe CircleInformation générale, ni certification de conformité ni conseil juridique ou médical. Besoins et précision varient ; un seuil technique ne garantit pas un usage sans erreur.