Accessibilité mobile : Les critères incontournables du RGAA
En Bref : L'essentiel à retenir
- L'accessibilité mobile est essentielle et nécessite de prendre en compte les spécificités des écrans tactiles.
- Pour une accessibilité optimale, les zones interactives doivent mesurer au moins 44x44 pixels CSS et le contenu doit s'adapter aux deux orientations d'écran.
- Évitez les gestes complexes exclusifs et assurez un contraste de 3:1 pour les éléments non textuels par rapport à l'arrière-plan.
- Testez l'accessibilité sur de vrais appareils iOS et Android avec les lecteurs d'écran natifs comme VoiceOver et TalkBack.
Aujourd'hui, la majorité des utilisateurs naviguent sur mobile. L'accessibilité n'est pas réservée aux ordinateurs de bureau ("desktop"). Le RGAA, aligné sur les WCAG 2.1, intègre des critères spécifiques pour garantir une expérience fluide sur les petits écrans tactiles. Pour garantir une cohérence sur tous les écrans, intégrez ces règles directement dans votre Design System.
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 ayant des tremblements ou de gros doigts.
- La règle : Une zone interactive doit mesurer au moins 44x44 pixels CSS (ou 24x24 pixels avec un espacement suffisant, selon les critères WCAG 2.2 niveau AA).
- 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.
- La règle : 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.
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.
Tester sur mobile : les outils
Ne vous fiez pas uniquement à la vue "mobile" de votre navigateur de bureau. Testez sur de vrais appareils (iOS et Android) avec les lecteurs d'écran natifs :
- VoiceOver sur iOS.
- TalkBack sur Android.
L'expérience tactile est radicalement différente de la navigation à la souris. Un bouton peut être accessible au clic mais impossible à activer au toucher s'il est masqué par un autre élément transparent.
Conclusion
L'accessibilité mobile est critique. Un site non navigable sur smartphone exclut de fait une immense partie de la population. Intégrez ces tests dès la phase de design !
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
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.
Le contraste entre la couleur du texte et la couleur de son arrière-plan doit être suffisamment élevé (4.5:1 pour le texte normal, 3:1 pour le grand texte).
Le contraste des composants d'interface et des éléments graphiques porteurs d'information doit être d'au moins 3:1 par rapport à leur arrière-plan.
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.