Accessibilité Mobile : Guide complet RGAA iOS Android [2026]

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 padding de 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

Où le RGAA accroche, côté mobile

Le tableau ci-dessus liste des critères WCAG. Côté référentiel français, quatre critères concentrent les échecs constatés sur petit écran, et ce sont eux qu'un audit RGAA vous opposera.

Le critère 10.11 est le plus souvent oublié parce qu'il ne se teste pas au doigt : il faut réduire la fenêtre à 320 px de large et vérifier qu'aucun contenu ne déborde. Le 13.9, lui, se vérifie en pivotant l'appareil. Un en-tête collant qui mange la moitié de la hauteur en paysage rend la page inutilisable pour qui a fixé son téléphone à un fauteuil dans une position donnée.

Deux réglages qui changent la saisie

Le tunnel de saisie est le moment où un défaut mobile coûte le plus cher. Deux détails de balisage y font une différence disproportionnée.

Le bon type de champ. Il déclenche le bon clavier, ce qui réduit directement l'effort moteur.

<input type="tel" autocomplete="tel">
<input type="email" autocomplete="email">
<input type="text" inputmode="numeric" autocomplete="one-time-code">

Le dernier permet le remplissage automatique du code reçu par SMS, ce qui supprime une manipulation entière pour l'utilisateur.

Le clavier virtuel qui masque le champ. C'est un défaut classique : le clavier s'ouvre et recouvre le champ en cours de saisie. La clé interactive-widget de la balise viewport demande au navigateur de redimensionner la zone visible plutôt que de la laisser glisser sous le clavier.

<meta name="viewport"
      content="width=device-width, initial-scale=1, interactive-widget=resizes-content">

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

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

1. Boutons trop petits : Le "hamburger menu" de 20px est inutilisable
2. Labels manquants : Icônes sans texte ni aria-label
3. Carrousels sans boutons : Swipe only = exclusion
4. Formulaires non adaptés : Champs trop petits, clavier inapproprié
5. 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 - Une liste de contrôle à parcourir
• Liste des 106 critères RGAA - Chaque critère avec ses tests et ses exemples de code

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. Une zone de touche trop petite se corrige en une ligne de CSS au moment de la conception ; découverte en recette, elle se négocie avec le planning.

Tester l'accessibilité de votre site →