Accessibilité dans les applications mobiles – Guide complet avec exemples

La théorie de l'accessibilité est belle, mais ce dont les développeurs et les concepteurs ont réellement besoin, ce sont des exemples. Voir comment fonctionne le code, comment l'interface se comporte et où les entreprises font des erreurs (et font les choses correctement) est la meilleure façon d'apprendre.

Dans ce guide pratique, nous quitterons le champ des idées et plongerons dans des exemples réels de mise en œuvre de l'accessibilité dans des applications mobiles (iOS et Android), décortiquant les modèles d'interface utilisateur et montrant comment les rendre inclusifs.

Exemple 1 : Le bouton "Ghost" (boutons d'icônes)

Vous connaissez cette icône en forme de loupe dans le coin de l’écran pour rechercher quelque chose ? Ou l'icône d'engrenage pour les paramètres ? Pour un utilisateur voyant, l'icône suffit. Pour un utilisateur aveugle utilisant un lecteur d'écran (VoiceOver/TalkBack), si ce bouton n'a pas de label (label), il entendra simplement : « Bouton ».

"Bouton" ne dit rien. Bouton quoi ? Supprimer le compte ? Acheter ?

Dans le mauvais sens (inaccessible)

<!-- Android Layout -->
<ImageButton
    android:id="@+id/btn_settings"
    android:src="@drawable/ic_gear"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Le lecteur d'écran lira le nom de la classe ou simplement le "bouton sans étiquette".

La bonne voie (accessible)

<!-- Android Layout -->
<ImageButton
    android:id="@+id/btn_settings"
    android:src="@drawable/ic_gear"
    android:contentDescription="@string/settings_button_description"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Sur iOS (SwiftUI) :

// Acessível
Button(action: openSettings) {
    Image(systemName: "gear")
}
.accessibilityLabel("Configurações")

Résultat : l'utilisateur entendra « Paramètres, bouton ». Simple mais essentiel.

Exemple 2 : Commentaires sur les erreurs dans les formulaires

Vous remplissez un formulaire, cliquez sur "Soumettre" et rien ne se passe. Le champ du mot de passe est devenu rouge, mais vous ne l'avez pas vu car vous êtes daltonien (Protanopie).

Règle d'or : n'utilisez jamais juste la couleur pour transmettre des informations.

La bonne manière

En plus de rendre la bordure rouge, ajoutez une icône d'alerte et un message texte explicatif sous le champ.

❌ Mauvais : bordure rouge.
✅ Bon : Bordure rouge + Icône ⚠️ + Texte "Le mot de passe doit comporter 8 caractères".

De plus, pour les lecteurs d'écran, le focus doit être mis sur le champ d'erreur ou l'erreur doit être annoncée.

// Android: Anunciar erro para TalkBack
passwordInputLayout.error = "Senha muito curta"
passwordInputLayout.announceForAccessibility("Erro: Senha muito curta")

Exemple 3 : Toucher les cibles

Avez-vous déjà essayé de cliquer sur ce petit « x » pour fermer une annonce et avez fini par cliquer sur l'annonce ? C'est frustrant pour tout le monde, mais impossible pour ceux qui ont des tremblements aux mains (Parkinson par exemple).

Les directives WCAG et Apple/Google recommandent une zone tactile minimale de 44 x 44 dp (iOS) ou 48 x 48 dp (Android).

Conseil de mise en œuvre : vous n'avez pas besoin d'agrandir visuellement l'icône. Vous ne pouvez qu'augmenter le rembourrage invisible qui l'entoure.

/* CSS (React Native / Web App) */
.close-button {
  width: 20px;   /* Ícone visual pequeno */
  height: 20px;
  padding: 12px; /* Área de toque grande */
  box-sizing: content-box; /* Garante que o padding some ao tamanho */
}

Exemple 4 : Images décoratives vs informations

Toutes les images n’ont pas besoin d’une description. Si vous décrivez tout, vous polluerez l’expérience d’écoute de l’utilisateur.

Image informative : Une photo d'un produit que vous vendez.
- Action : alt="Tênis de corrida azul com solado branco".
Image décorative : une icône en forme de flèche à côté d'un texte « En savoir plus » ou une vague graphique au bas de l'en-tête.
- Action : Masquer du lecteur d'écran.

Dans Flutter :

// Imagem Decorativa (Invisível para Semântica)
ExcludeSemantics(
  child: Image.asset('background_wave.png'),
)

// Imagem Informativa
Semantics(
  label: 'Logo da Empresa',
  image: true,
  child: Image.asset('logo.png'),
)

Exemple 5 : État de chargement

L'utilisateur clique sur "Payer". L'écran se fige. Une roulette semble tourner. Pour quiconque le voit, c'est clair : "C'est en cours de chargement". Pour ceux qui ne le voient pas, le silence est angoissant. "Il s'est écrasé ? L'application s'est fermée ? Ma connexion Internet est tombée en panne ?"

Fournissez toujours un retour auditif pour les états de charge.

Android : utilisez ProgressBar avec android:stateDescription="Carregando pagamento...".
iOS : utilisez UIAccessibility.post(notification: .announcement, argument: "Processando pagamento, aguarde.").

Conclusion

L'accessibilité ne consiste pas à mémoriser des règles abstraites. Il s'agit de comprendre comment le code se traduit en expérience pour différents humains.

En appliquant ces normes (étiquettes de boutons, couleurs redondantes, zones tactiles généreuses, sémantique correcte et retour d'état), vous résolvez 90 % des obstacles qui empêchent les gens d'utiliser votre application.

Le meilleur code n’est pas le plus complexe. C'est celui qui fonctionne pour le plus grand nombre.