Accessibilité Mobile : Guide complet RGAA iOS Android [2026]
En Bref : L'essentiel à retenir
- L'accessibilité mobile est essentielle : 60% du trafic web est mobile en 2026.
- Zones interactives : minimum 44x44 pixels CSS (WCAG 2.2 Target Size).
- Évitez les gestes complexes exclusifs. Proposez toujours une alternative simple.
- Testez avec VoiceOver (iOS) et TalkBack (Android) sur de vrais appareils.
En 2026, plus de 60% du trafic web mondial provient des mobiles. L'accessibilité numérique ne peut plus se limiter au desktop. Pourtant, de nombreux sites restent inutilisables sur smartphone pour les personnes en situation de handicap.
Ce guide détaille les critères RGAA et WCAG 2.2 spécifiques au mobile, avec des conseils pratiques pour iOS et Android.
Pourquoi l'accessibilité mobile est critique en 2026
- 60%+ du trafic provient des mobiles (source : Statcounter 2026)
- EAA (European Accessibility Act) : depuis juin 2025, les e-commerces doivent être accessibles sur tous les appareils
- WCAG 2.2 : nouveaux critères spécifiques au tactile (Target Size, Dragging Movements)
- Les lecteurs d'écran mobiles (VoiceOver, TalkBack) ont des comportements différents du desktop
Les 4 piliers de l'accessibilité mobile
1. La taille des zones de touche (Target Size)
C'est l'erreur la plus fréquente. Un bouton trop petit est inutilisable pour une personne en situation de handicap moteur (tremblements) ou simplement pour quelqu'un avec de gros doigts.
- La règle d'or : Visez 44x44 pixels CSS pour un confort optimal (Standard Apple & WCAG AAA).
- Le minimum légal : 24x24 pixels CSS (WCAG 2.2 niveau AA), à condition d'avoir assez d'espacement autour pour éviter les clics accidentels.
- Conseil : Augmentez le
paddingde vos liens et boutons, pas seulement la taille du texte.
2. L'orientation de l'écran
Ne forcez jamais l'utilisateur à tenir son téléphone en mode portrait ou paysage.
- Le critère de succès : Le contenu doit s'adapter aux deux orientations.
- Pourquoi ? : Certaines personnes ont leur téléphone fixé sur un fauteuil roulant dans une position fixe.
- Attention : Un tableau de données complexe peut être difficile à lire en portrait. Prévoyez une version responsive ou permettez le scroll horizontal.
3. Les gestes complexes (Pointer Gestures)
Évitez de baser des interactions uniquement sur des gestes complexes (glisser avec plusieurs doigts, secouer, dessiner une forme).
- La règle : Tout geste complexe doit avoir une alternative simple (ex: un bouton "cliquable" pour faire défiler un carrousel, en plus du "swipe").
4. Le contraste des éléments non textuels
On pense souvent au contraste du texte, mais qu'en est-il des icônes et des boutons ?
- La règle : Les composants d'interface (bordures de champs, icônes de menu) doivent avoir un ratio de contraste d'au moins 3:1 avec l'arrière-plan.
Les critères WCAG 2.2 spécifiques au mobile
| Critère | Niveau | Description |
|---|---|---|
| 2.5.5 Target Size (Enhanced) | AAA | Zones de 44x44px minimum |
| 2.5.8 Target Size (Minimum) | AA | Zones de 24x24px minimum (nouveau WCAG 2.2) |
| 1.3.4 Orientation | AA | Pas de blocage portrait/paysage |
| 2.5.1 Pointer Gestures | A | Alternative aux gestes complexes |
| 2.5.4 Motion Actuation | A | Alternative aux mouvements (secouer, etc.) |
| 2.5.7 Dragging Movements | AA | Alternative au glisser-déposer (nouveau WCAG 2.2) |
Tester sur mobile : méthodologie
Ne vous fiez jamais uniquement à la vue "responsive" de votre navigateur. Elle ne simule pas :
- Le comportement tactile réel
- Les lecteurs d'écran mobiles
- Les problèmes de performance sur appareils réels
Outils de test natifs
| Plateforme | Lecteur d'écran | Activation |
|---|---|---|
| iOS | VoiceOver | Réglages > Accessibilité > VoiceOver |
| Android | TalkBack | Paramètres > Accessibilité > TalkBack |
Checklist de test mobile
- Navigation complète au lecteur d'écran (VoiceOver/TalkBack)
- Tous les boutons font au moins 44x44px
- Le site fonctionne en portrait ET paysage
- Pas de geste "swipe" sans alternative bouton
- Contraste des icônes ≥ 3:1
- Zoom jusqu'à 200% sans perte de contenu
- Pas de scroll horizontal non voulu
Les 5 erreurs les plus courantes
- Boutons trop petits : Le "hamburger menu" de 20px est inutilisable
- Labels manquants : Icônes sans texte ni aria-label
- Carrousels sans boutons : Swipe only = exclusion
- Formulaires non adaptés : Champs trop petits, clavier inapproprié
- Popups non fermables : Bouton fermer hors écran ou trop petit
Outils complémentaires
Pour améliorer l'accessibilité de votre site mobile :
- Calculateur de contraste - Vérifiez vos ratios sur fond coloré
- Simulateur daltonisme - Testez vos couleurs
- Checklist RGAA - Les 106 critères à vérifier
Conclusion
L'accessibilité mobile n'est plus optionnelle en 2026. Avec l'EAA et les mises à jour WCAG 2.2, les critères tactiles sont devenus des obligations légales pour de nombreux sites.
Conseil : Intégrez les tests mobiles dès le design. Corriger après coup coûte 10x plus cher.
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
L'intitulé de chaque lien doit être explicite et permettre de comprendre la destination ou la fonction du lien, même hors contexte.
Chaque champ de formulaire doit avoir une étiquette (label) qui lui est liée explicitement.
Chaque image porteuse d'information doit avoir une alternative textuelle pertinente via l'attribut alt. Les images décoratives doivent avoir un attribut alt vide.
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.