2. Prototypage
Quel outil de prototypage choisir ? Comment s'assurer que son prototype est le plus accessible possible avant de le mettre entre les mains des utilisateurs ?
a. Choisir son outil
Il existe différents moyens de prototyper son service.
- Idéalement, prototyper en HTML/CSS : c'est une technologie extrêmement robuste, documentée en accessibilité depuis plus de 20 ans, utilisable par quasiment tous les usagers et avec n'importe quelle technologie d'assistance. Pour cela, il faut cependant un minimum de connaissances techniques ou une personne douée en développement et en accessibilité.
- Si non, vous pouvez aussi prototyper sous Figma de façon accessible paraît-il. Voir l'article d'aide (en anglais)
- Enfin, vous pouvez aussi travailler la hiérarchie de votre contenu dans Word en utilisant bien les niveaux de titre puis revenir tester le site HTML une fois développé en pré-prod.
Retour d'expérience sur le Portail Audiodescription
Nous sommes partis directement sur du prototypage HTML/CSS grâce aux compétences de notre développeuse Chloé Corfmat et au Design System de l'Etat qui nous a fait gagner beaucoup de temps en prototypage et mise en conformité.
Penser à prototyper au maximum en mobile-first ! Cela permet de hiérarchiser les informations telles que le lecteur d'écran va les lire et de s'assurer que la page ne soit pas trop longue.
b. Tester son accessibilité
Il est important de tester au maximum l'accessibilité vous-même avant de le mettre entre les mains des usagers. Vos tests ne vous apprendront rien s'ils sont bloqués dès la première étape. Vous pouvez par exemple :
- Vous auditer rapidement avec le Diagnostic Flash de Design.Gouv ou les Easy Checks de W3C (en anglais)
- Utiliser l'outil Wave
- Vous mettre dans la peau de vos personas pour tester différents parcours de navigation avec différentes technologies d'assistance.
Pour les parcours avec lecteurs d'écran, vous pouvez :
- Lire vos interfaces à voix haute pour vous rendre compte si elles sont digestes ou trop longues.
- Si vous êtes un peu plus expert, vous pouvez aussi activer le lecteur d'écran intégré à votre appareil (VoiceOver sur MacOS par exemple) et naviguer avec.
Le B.A.-BA VoiceOver
Vous êtes sous MacOS ? Les quelques choses à savoir pour démarrer avec VoiceOver :
- Activer VoiceOver : allez dans Réglages Système > Accessibilité > VoiceOver > Cocher l'interrupteur
- Naviguer sur le web : vous pouvez ouvrir une page web et naviguer de lien en lien avec la touche "tab" ou écouter tout le texte en appuyant sur la touche "majuscule" + flèches droite ou gauche.
- Ouvrir le rotor web : découvrez les différentes façons qu'ont les utilisateurs de parcourir votre site avec le rotor en utilisant le raccourci "majuscule" + U. Le rotor est particulièrement utilisé sur iPhone.
A noter : ce n'est pas parce que votre site est utilisable avec VoiceOver qu'il sera utilisable avec les autres lecteurs d'écran. Ils ont chacun certaines spécificités et modes de lecture (par exemple certains épellent un mot en majuscule alors que d'autres le liront normalement).
c. Une approche itérative
Notre façon de travailler a été de commencer petit et de réaliser des mises en production régulières en travaillant étroitement entre designer et développeuse. Les tests utilisateurs réguliers ont permis d'alimenter les évolutions du service.
Exemple d'itération
Le Portail de l'audiodescription a d'abord été conçu pour les utilisateurs aveugles. Ce n'est qu'une fois que son accessibilité et son utilisabilité ont été validées par les utilisateurs qu'eut lieu la mise en forme (ajout d'images, corrections des paddings, etc). Ci-dessus, vous pouvez voir l'évolution de la page d'accueil entre les premiers tests et sa sortie en février 2025. De la même façon, les filtres n'ont été ajoutés qu'une fois que le moteur de recherche a été jugé accessible.
Pour en apprendre plus sur le design des interfaces pour des personnes aveugles ou malvoyantes, voir les chapitres 4 et 5.
1. Recherche utilisateur