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, la vidéo sous-titrée de l’intervention 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.
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..
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.
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.
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 ».
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).
▶️ 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.
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.
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.
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.
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 consœurs et confrères sont en ligne et sous-titrées sur la chaine Peertube de l’école 😊.
Notes 