Accessibilité Mobile : Guide Complet pour les Sites et Applications

L'accessibilité mobile : un enjeu croissant

En France, plus de 60 % du trafic web provient désormais des appareils mobiles. Pour les personnes en situation de handicap, le smartphone est souvent le principal — voire le seul — moyen d'accéder à internet. Les fonctions d'accessibilité intégrées aux systèmes iOS et Android (VoiceOver, TalkBack, agrandissement, contrôle vocal) font du mobile un outil d'inclusion puissant, à condition que les sites et applications soient conçus pour en tirer parti.

L'obligation légale d'accessibilité numérique s'applique aussi bien aux sites web consultés sur mobile qu'aux applications mobiles natives. Le RGAA 4.1 couvre les sites web responsive, tandis que le référentiel européen EN 301 549 (auquel le RGAA est aligné) traite spécifiquement des applications mobiles natives.

L'European Accessibility Act, en vigueur depuis juin 2025, impose aux entreprises concernées de rendre accessibles leurs applications mobiles au même titre que leurs sites web. Les sanctions s'appliquent indifféremment aux deux supports.

Zones tactiles : taille et espacement

La taille des zones tactiles est un enjeu critique pour l'accessibilité mobile. Les personnes ayant des troubles moteurs, les personnes âgées ou simplement toute personne utilisant son téléphone d'une seule main ont besoin de cibles suffisamment grandes pour être touchées avec précision.

Recommandations de taille

/* Zones tactiles accessibles en CSS */
button, a, input, select, [role="button"] {
  min-width: 44px;
  min-height: 44px;
  /* Espacement entre les cibles */
  margin: 4px;
}

/* Alternative : padding pour agrandir la zone cliquable */
.compact-link {
  padding: 12px;
  /* Le texte peut être petit mais la zone tactile est grande */
}

Espacement entre les cibles

Deux cibles tactiles trop proches provoquent des erreurs de tap. Maintenez un espacement minimum de 8 pixels entre les éléments cliquables. Pour les actions critiques (suppression, paiement), prévoyez un espacement encore plus généreux.

Design responsive et accessibilité

Le design responsive est la base de l'accessibilité mobile pour les sites web. Le RGAA impose que le contenu reste accessible et fonctionnel quel que soit la taille de l'écran.

Critères RGAA pour le responsive

• Critère 10.11 — Le contenu doit rester lisible lorsque la largeur de la fenêtre est réduite à 320 pixels CSS (équivalent d'un zoom à 400 % sur un écran de 1280 pixels).
• Critère 10.12 — Le contenu doit rester lisible lorsque la hauteur de la fenêtre est réduite à 256 pixels CSS (pour les interfaces en mode paysage).
• Critère 13.9 — Les contenus ne doivent pas nécessiter de défilement horizontal ET vertical simultané (à l'exception des tableaux de données, images et vidéos).

Bonnes pratiques responsive

/* Viewport meta tag correct */
<meta name="viewport"
  content="width=device-width, initial-scale=1"
/>

/* MAUVAIS : empêche le zoom utilisateur */
<meta name="viewport"
  content="width=device-width, initial-scale=1,
  maximum-scale=1, user-scalable=no"
/>

Ne jamais empêcher le zoom utilisateur (user-scalable=no ou maximum-scale=1). De nombreuses personnes malvoyantes dépendent du zoom pour lire le contenu. Le critère RGAA 13.10 interdit explicitement de bloquer la fonctionnalité de zoom du navigateur.

/* Styles responsive accessibles */

/* Utiliser des unités relatives, pas des pixels fixes */
body {
  font-size: 100%; /* 16px par défaut */
  line-height: 1.5;
}

h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
p { font-size: clamp(1rem, 2.5vw, 1.125rem); }

/* Conteneur flexible */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

/* Grille responsive sans media queries */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Lecteurs d'écran mobiles

Les deux principaux lecteurs d'écran mobiles sont VoiceOver (iOS) et TalkBack (Android). Ils modifient profondément la façon dont les utilisateurs interagissent avec votre site.

VoiceOver (iOS)

• Navigation — Balayage gauche/droite pour passer d'un élément au suivant/précédent.
• Activation — Double tap pour activer un élément (clic).
• Rotor — Geste de rotation à deux doigts pour naviguer par type d'élément (titres, liens, formulaires, landmarks).
• Part de marché — Environ 70 % des utilisateurs de lecteurs d'écran mobiles en France utilisent VoiceOver.

TalkBack (Android)

• Navigation — Balayage gauche/droite pour naviguer entre les éléments.
• Activation — Double tap pour activer.
• Menu contextuel — Balayage vers le haut puis vers la droite pour accéder aux options de navigation (par titres, liens, etc.).
• Part de marché — Environ 30 % des utilisateurs de lecteurs d'écran mobiles en France.

Points d'attention pour les lecteurs d'écran

• Ordre de lecture — L'ordre du DOM détermine l'ordre de lecture. Assurez-vous que l'ordre visuel correspond à l'ordre du code source.
• Éléments masqués — Les éléments cachés visuellement avec display: none ou visibility: hidden sont ignorés par les lecteurs d'écran. Utilisez aria-hidden="true" uniquement pour masquer des éléments visuels redondants.
• Contenus dynamiques — Les mises à jour de contenu doivent être annoncées avec aria-live. Consultez notre guide ARIA pour les détails.
• Gestes personnalisés — Évitez les gestes complexes (glisser-déposer, pinch, rotation) comme seul moyen d'interaction. Proposez toujours une alternative simple (bouton, tap unique).

Gestes accessibles

Les gestes tactiles posent des défis spécifiques d'accessibilité. Le WCAG 2.1 a introduit plusieurs critères dédiés :

Critère 2.5.1 — Gestes de pointeur

Toute fonctionnalité qui utilise des gestes multipoints (pinch, swipe à deux doigts) ou des gestes basés sur un tracé (glisser-déposer) doit avoir une alternative accessible avec un geste simple (tap unique, clic).

<!-- MAUVAIS : suppression uniquement par swipe -->
<div @swipeleft="deleteItem">Article à supprimer</div>

<!-- BON : bouton alternatif en plus du swipe -->
<div @swipeleft="showDeleteButton">
  Article à supprimer
  <button
    v-if="showDelete"
    @click="deleteItem"
    aria-label="Supprimer cet article"
  >
    Supprimer
  </button>
</div>

Critère 2.5.2 — Annulation du pointeur

Les actions ne doivent pas se déclencher sur l'événement « down » (toucher l'écran) mais sur l'événement « up » (relâcher le doigt). Cela permet à l'utilisateur d'annuler une action en déplaçant son doigt avant de relâcher.

Critère 2.5.4 — Activation par le mouvement

Si une fonctionnalité peut être activée par le mouvement de l'appareil (secouer, incliner), elle doit aussi pouvoir être activée par un composant d'interface classique (bouton) et pouvoir être désactivée pour éviter les déclenchements involontaires.

Orientation de l'écran

Le critère WCAG 1.3.4 (repris dans le RGAA) exige que le contenu ne soit pas verrouillé dans une seule orientation (portrait ou paysage), sauf si une orientation spécifique est essentielle à la fonctionnalité (comme un jeu en mode paysage ou un piano virtuel).

/* MAUVAIS : bloque l'orientation */
@media (orientation: portrait) {
  .content { display: block; }
}
@media (orientation: landscape) {
  .content { display: none; }
  .rotate-message { display: block; }
}

/* BON : adapte le contenu aux deux orientations */
@media (orientation: portrait) {
  .grid { grid-template-columns: 1fr; }
}
@media (orientation: landscape) {
  .grid { grid-template-columns: 1fr 1fr; }
}

Formulaires mobiles accessibles

Les formulaires sur mobile présentent des défis supplémentaires :

• Type d'input approprié — Utilisez type="email", type="tel", type="number" pour afficher le clavier virtuel adapté.
• Attribut inputmode — Pour un contrôle plus fin : inputmode="numeric" affiche un clavier numérique sans les caractères spéciaux.
• Autocomplétion — Les attributs autocomplete sont encore plus importants sur mobile où la saisie est plus laborieuse.
• Labels toujours visibles — Évitez les labels qui disparaissent en placeholder car l'utilisateur perd le contexte une fois qu'il a commencé la saisie.
• Messages d'erreur — Assurez-vous que les messages d'erreur sont visibles sans avoir à faire défiler, surtout sur les petits écrans.

<!-- Formulaire mobile optimisé -->
<label for="telephone">Numéro de téléphone</label>
<input
  id="telephone"
  type="tel"
  inputmode="numeric"
  autocomplete="tel"
  pattern="[0-9]{10}"
  aria-describedby="aide-tel"
/>
<p id="aide-tel">Format : 06 12 34 56 78</p>

Tester l'accessibilité mobile

Tests avec lecteurs d'écran

1. VoiceOver (iOS) — Activez VoiceOver dans Réglages > Accessibilité > VoiceOver. Naviguez sur votre site avec les gestes de balayage et vérifiez que chaque élément est correctement annoncé.
2. TalkBack (Android) — Activez TalkBack dans Paramètres > Accessibilité > TalkBack. Testez la navigation par gestes et la compréhension du contenu.

Tests de zoom et d'agrandissement

• Vérifiez que le zoom par pinch fonctionne (pas de user-scalable=no).
• Testez l'agrandissement système (iOS : zoom d'écran, Android : taille d'affichage augmentée).
• Vérifiez que le contenu reste fonctionnel à 200 % de zoom.

Tests de taille de texte

• iOS — Réglages > Accessibilité > Taille du texte. Augmentez la taille et vérifiez que votre site s'adapte (si vous utilisez Dynamic Type pour les apps natives).
• Android — Paramètres > Affichage > Taille de la police. Testez avec la taille maximale.

Tests de contraste en conditions réelles

Testez votre site en extérieur avec la luminosité ambiante. Les ratios de contraste minimaux du WCAG sont calculés pour des conditions de lecture idéales. En plein soleil, même un contraste conforme peut être difficile à lire. Visez des ratios supérieurs au minimum requis.

Checklist accessibilité mobile

Conseil : Testez systématiquement votre site sur mobile avec RGAA Test pour détecter les problèmes d'accessibilité de base, puis complétez par des tests manuels avec VoiceOver (iOS) et TalkBack (Android) pour valider l'expérience utilisateur réelle.