Cet article est une retranscription de la conférence donnée dans le cadre de la rencontre Accessibilité et éthique dans le numérique organisée par l’École Supérieure de Génie Informatique. Voici les interventions prévues :

  • Découvrir les usages pour mieux appréhender l’accessibilité par Sébastien Delorme ;
  • Concevoir des sites et applications mobiles accessibles, à découvrir dans la suite de cet article ;
  • Apprendre à connaître ses utilisateur·ices ! par Maïtané Lenoir ;
  • Design pour l’inclusion par Marie-Cécile Godwin.

Voici les diapositives de ma présentation, ainsi que la retranscription ci-dessous.


10 bonnes pratiques pour des applis accessibles 💪❤️

Hello 👋, je suis Anne-Sophie. Ancienne développeuse, aujourd’hui UX/UI Designer pour le service public et spécialisée en accessibilité.

Vous pouvez me retrouver sur Twitter ou sur mon blog, où je publie chaque mois une revue du web d’accessibilité pour les designers.

Dans cette présentation, je vais parler de :

  • des 4 grands principes d’accessibilité (le 3e va vous étonner !)
  • un résumé des bonnes pratiques pour des applis accessibles (ça peut toujours servir…)
  • quelques liens (pour aller plus loin)

Vous êtes prêts ? Alors, entrons dans le vif du sujet !

Principe 1 : une interface accessible est une interface perceptible

L’application doit être accessible à toutes et à tous, peu importe les sens utilisés. Pour de nombreuses personnes, il s’agit de la vue. D’autres utilisent plutôt l’ouïe (via un lecteur d’écran) ou le toucher (avec une plage braille).

Permettre le zoom ou l’agrandissement

Les gens doivent pouvoir agrandir le texte :

  • via les préférences de l’OS ou les préférences de l’application.
  • en zoomant avec un “pinch” d’écran.

Une application accessible fera en sorte de prendre en compte ses paramètres et/ou de ne pas bloquer le zoom.

Capture d'écran d'un navigateur avec Facebook ouvert. Le texte est agrandi  à certains endroits.

Par exemple, on ne fera pas comme l’application Facebook qui ne prend pas en compte les préférences de l’OS si l’utilisateur choisi d’agrandir la police. La version mobile du site marche un peu mieux : les contenus principaux sont bien agrandis, mais pas les commentaires, qui sont donc illisibles pour les personnes malvoyantes.

▶️ Cette bonne pratique est particulièrement utile pour les personnes malvoyantes.

Soigner les contrastes

Sur mobile, la densité de l’écran est réduite et les conditions lumineuses souvent mauvaises. Ne pas hésiter à booster le contraste entre le premier et l’arrière-plan pour que les textes soient lisibles..

Capture d'écran d'une application de podcasts. Certains textes sont écrits en gris clair sur fond blanc.

Sur cette application pour lire des podcasts, le nombre de gens abonnés et le nom du studio d’enregistrement du podcast sont écrit en gris clairs sur fond blanc. Ces textes ne respectent pas du tout le ratio de contraste minimum.

▶️ Cette bonne pratique est particulièrement utile pour les personnes malvoyantes (et plus globalement les personnes qui utilisent leur téléphone en extérieur).

Principe 2 : une interface accessible est une interface opérable

Les personnes utilisant l’application peuvent interagir avec. Par exemple, comme de nombreuses personnes en cliquant ou en touchant l’écran ; mais aussi avec un clavier d’ordinateur ou une commande vocale.

Proposer des zones cliquables confortables

Les éléments cliquables doivent être grands, et à distance les uns des autres pour être ciblés facilement.

Capture d'écran de l'application Pole Emploi. De gros blocs cliquables permettent d'accéder aux différentes sections.

Rien à reprocher à l’application Pole Emploi donc : l’intégralité des blocs sont cliquables, et pas seulement le texte « Consulter ». Cela rend l’application particulièrement facile à naviguer.

▶️ Cette bonne pratique est particulièrement utile pour les personnes avec des troubles moteurs (Parkinson…), celles avec des gros doigts ou celles utilisant l’application dans une voiture ou un bus par exemple.

Éviter les gestes complexes

Certains gestes (à 2 ou 3 doigts, double ou triples taps, mouvement à dessiner) peuvent être compliqués à exécuter. L’idée n’est pas d’interdire l’utilisation de ces mécanismes d’actions, mais plutôt de proposer des alternatives au touch.

Capture d'écran d'une application affichant une liste de podcasts. Un élément est en train d'être slidé sur le côté, faisant apparaître une icône "Supprimer".

Dans cette application de podcast, il est possible d’archiver un podcast en le faisait glisser. Le mouvement peut être difficile à exécuter puisqu’il faut slider jusqu’au bout de la ligne.

Heureusement, l’application propose une autre alternative à cette fonctionnalité d’archivage d’un podcast, via les détails de celui ci.

▶️ Cette bonne pratique est particulièrement utile pour les personnes avec des troubles moteurs et les personnes utilisant un lecteur d’écran.

Éviter les manipulations de l’appareil

Secouer ou pencher l’appareil :

  • est impossible si l’appareil est fixé.
  • peut être déclenché « sans faire exprès ».
Capture d'écran de l'application Google Maps, montrant une modale expliquant la fonctionnalité "Secouer pour commenter"

Le saviez-vous ? On peut commenter des lieux sur Google Maps en secouant son appareil. Personnellement, je l’ai découvert en… éternuant.

Les fonctionnalités de manipulation de l’appareil ont donc en plus un problème de découvrabilité.

Donc encore une fois, les utiliser n’est pas interdit évidemment, mais il faut garder en tête qu’il sera plus utile de proposer une alternative au touch pour ces actions.

▶️ Cette bonne pratique est particulièrement utile pour les personnes dont le mobile est fixé (par exemple sur un fauteuil) ou bien les personnes avec des troubles moteurs.

Penser aux zones faciles d’accès

L’application doit être optimisée pour être utilisable d’une seule main, gauche ou droite. En effet, tout le monde n’a pas deux mains disponibles, que ça soit permanent (problème de mobilité, manque d’un membre…) ou temporaire (un enfant dans les bras, une barre de métro à tenir, etc).

Illustrations de 4 tailles de téléphones différentes. Les zones faciles d'accès sont représentées en vert. Plus le téléphone est grand, moins la superficie "facile d'accès" est grande.

▶️ Cette bonne pratique est particulièrement utile pour les personnes n’ayant qu’une main disponible.

Principe 3 : une interface accessible est une interface compréhensible

L’application doit être cohérente et prévisible dans sa conception et ses modes d’utilisation. Les utilisateurs doivent pouvoir comprendre le contenu, apprendre et se souvenir comment utiliser l’interface.

Ne pas bloquer l’orientation de l’application

Une application devrait pouvoir supporter les deux orientations (portrait et paysage) : certaines personnes ne peuvent pas faire pivoter leur appareil.

Capture d'écran de Netflix. L'image est affichée au format vertical, mais la vidéo s'affiche au format horizontal : il faut pencher la tête pour la voir.

Netflix affiche forcément les vidéos au format horizontal. À contrario, Youtube laisse la possibilité de l’afficher dans les deux sens.

▶️ Cette bonne pratique est particulièrement utile pour les personnes dont le mobile est fixé à leur fauteuil roulant.

Indiquer clairement les éléments actionnables

Les boutons et liens doivent respecter les conventions (formes, couleurs…) pour être facilement identifiés comme actionnables.

Et comme sur le web, ils doivent être correctement labellisés, via les attributs qui conviennent, pour être bien interprétés par les lecteurs d’écrans. Un bouton lu « bouton » par un lecteur d’écran ne sera d’aucune aide pour les usagers.

Capture d'écran d'une appli financière.

Sur cette application de gestion d’argent, un certain nombre d’éléments sont cliquables.

Auriez-vous deviné par exemple que la barre de titre, affichant le solde du compte est cliquable et permet de modifier les comptes affichés ?

▶️ Cette bonne pratique est particulièrement utile pour les personnes utilisant un lecteur d’écran, les personnes malvoyantes.

Principe 4 : une interface accessible est une interface robuste

L’application est compatible avec de multiples systèmes d’exploitation ou outils d’assistance.

Faciliter la saisie en affichant le bon clavier

Le bon type de clavier permet de réduire les erreurs.

Interface de formulaire demandant un numéro de téléphone et affichant un clavier numérique.

L’utilisation des attributs adéquats va permettre l’affichage du bon clavier.

▶️ Cette bonne pratique est particulièrement utile pour… toutes les personnes utilisant votre application.

Être compatible avec les options d’accessibilité de l’OS

Les smartphones offrent de nombreuses fonctionnalités pour aider les personnes en situation de handicap. Une bonne application prend en compte ces options.

Capture d'écran de la page Paramètres d'un téléphone Android. On y voit les catégories Vue, Audition, Dextérité et interaction, Synthèse vocale...

Chaque personne peut personnaliser son téléphone pour le rendre plus accessible. Par exemple :

  • en activant un lecteur d’écran,
  • en modifiant la taille de la police ou la police
  • en affichant des polices à contraste élevés
  • en installant un clavier particulier

Il existe une multitude de paramètres que je vous encourage et explorer ; et surtout à observer comment votre site ou application réagit à ces paramètres de personnalisation.

▶️ Cette bonne pratique est particulièrement utile pour toutes les personnes ayant des troubles de la vue, de l’audition ou des troubles moteurs.

En résumé

Voici les bonnes pratiques que nous avons abordé :

Pour une application perceptible :

  • Permettre le zoom ou l’agrandissement.
  • Soigner les contrastes.

Pour une application opérable :

  • Proposer des zones cliquables confortables.
  • Proposer des alternatives aux gestes complexes.
  • Proposer des alternatives à la manipulation de l’appareil.
  • Penser aux zones faciles d’accès.

Pour une application compréhensible :

  • Ne pas bloquer l’orientation de l’application.
  • Indiquer clairement les éléments actionnables.

Pour une application robuste :

  • Faciliter la saisie en affichant le bon clavier.
  • Être compatible avec les options d’accessibilité de l’OS

Pour aller plus loin

Voici quelques liens pour creuser le sujet :

  • Principes d’accessibilité : le site du W3C est la référence pour les bases de l’accessibilité. Par ailleurs, le W3C fait un gros travail de vulgarisation pour rendre ses contenus… accessibles. C’est donc une excellente ressource pour commencer.
  • Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile : cette article n’est qu’une synthèse et traduction du travail de cette page de travail du W3C. Assez technique, elle liste toutes les manière dont les bonnes pratiques d’accessibilités s’appliquent au mobile. Pour découvrir les autres bonnes pratiques dont je n’ai pas parlé dans cet article, c’est donc ici.
  • Accessibilité Numérique Orange : voilà une ressource plus concrète. Vous trouverez sur cette page un ensemble de recommandations, méthodes, ressources et outils proposés par l’équipe Accessibilité Numérique du groupe Orange.

Merci de votre écoute/lecture ! La vidéo de mon intervention, ainsi que celles de mes confrères et consoeurs seront bientôt en ligne sur la chaine Peertube de l’école 😊.

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s