Checklist design : les étapes pour un design UX accessible

Rendre un design accessible, c’est souvent plus simple qu’on ne l’imagine… à condition de savoir quoi vérifier. Entre les principes WCAG, les bonnes pratiques d’UX Design et les pièges à éviter, il est facile d’oublier un point essentiel.

Cet article vous permettra de vérifier que vous avez bien en tête tous les éléments à contrôler pour créer une interface plus inclusive, plus claire et plus agréable à utiliser pour tout le monde.

Qu’est-ce qu’un design d’interface accessible ?

Un design UX accessible, c’est une interface utilisable par toutes et tous, y compris les personnes en situation de handicap, en respectant des normes établies et en intégrant des principes inclusifs dès les premières étapes de conception. 

C’est important, parce que les personnes en situation de handicap sont déjà discriminées dans leur vie quotidienne : peu d’espaces de la vie publique sont réellement inclusifs ou accessibles.

Selon l’OMS, 1,3 milliard de personnes dans le monde vivent avec un handicap.

Et pourtant… 95% des pages d’accueil du million des sites les plus visités présentent au moins une erreur d’accessibilité (WebAIM).

Et encore : on compte en moyenne 51 erreurs par page.

On comprend mieux pourquoi personne n’arrive jamais à comprendre ou utiliser un site web !

Pour répondre à ces enjeux et leur simplifier la vie, les Web Content Accessibility Guidelines (WCAG), ou Règles pour l’accessibilité des contenus Web en français, ont établi les bonnes pratiques à suivre pour rendre un site accessible au plus grand nombre, en tenant compte des dimensions physiques, cognitives, sensorielles mais aussi techniques des utilisateurs.

Penser accessibilité d’abord permet de redéfinir sa manière de penser une interface et d’explorer de nouvelles façons de faire !

La base de l’accessibilité : les 4 principes WCAG

Les directives WCAG reposent sur quatre grands principes qui définissent les conditions indispensables pour rendre un contenu Web accessible à toutes et tous. Pour garantir une expérience inclusive, chaque site ou interface doit proposer un contenu :

• Perceptible
• Utilisable
• Compréhensible
• Robuste

1. Perceptible

Les informations et les composants de l’interface utilisateur doivent être présentés aux utilisateurs d’une manière qu’ils peuvent percevoir.

Cela signifie que les utilisateurs doivent être en mesure de percevoir les informations présentées (elles ne doivent pas être invisibles pour tous leurs sens).

2. Utilisable

Les composants de l’interface utilisateur et la navigation doivent être utilisables.

Cela signifie que les utilisateurs doivent pouvoir utiliser l’interface (celle-ci ne doit pas nécessiter d’interaction impossible à réaliser pour un utilisateur).

3. Compréhensible

Les informations et le fonctionnement de l’interface utilisateur doivent être compréhensibles.

Cela signifie que les utilisateurs doivent pouvoir comprendre les informations ainsi que le fonctionnement de l’interface utilisateur (le contenu ou le fonctionnement ne doit pas dépasser leur compréhension).

4. Robuste

Le contenu doit être suffisamment robuste pour pouvoir être interprété de manière fiable par une grande variété d’agents utilisateurs, y compris les technologies d’assistance.

Cela signifie que les utilisateurs doivent pouvoir accéder au contenu à mesure que les technologies progressent (à mesure que les technologies et les agents utilisateurs évoluent, le contenu doit rester accessible).

La checklist du design accessible et ergonomique

Cette checklist suit les 10 heuristiques de Jakob Nielsen. Elle vous permettra de relever les potentielles erreurs de votre interface, et doit être complétée par des tests utilisateurs.

Accessibilité visuelle

• Les contenus sont présentés avec un contraste suffisant par rapport à leur arrière-plan.
• La présentation visuelle des éléments facilite leur lisibilité sur écran (contrasté, nombre de caractères par ligne, etc). Par convention, le critère « lisibilité » ne concerne ni le feedback ni les messages d’erreurs.
• L’information n’est pas véhiculée uniquement par la couleur.

Facilité d’apprentissage et vocabulaire

• Le système « parle » la langue des utilisateurs et utilisatrices de telle façon que les informations apparaissent dans un ordre naturel et logique, en se conformant aux mots, expressions et conventions usuels.
• L’interface évite le jargon technique et utilise des termes familiers à l’utilisateur ou utilisatrice. Elle explicite également les règles d’abréviations si certaines sont utilisées.
• L’interface suit les conventions de la plateforme. Les utilisateurs et utilisatrices ne doivent pas se demander si les différents mots, situations ou actions veulent dire la même chose. Les titres et entêtes doivent être représentatifs du contenu.
• Les choix et codes de conception de l’interface sont conservés dans des contextes identiques et différents dans des contextes différents.
• Le système fournit des aides et de la documentation.
• Le système doit respecter le niveau d’expérience de l’utilisateur ou utilisatrice. Par exemple, prévoir des choix d’entrées pas-à-pas ou multiples selon leur niveau d’expérience.

Efficacité

• Le système rend les objets, les actions et les options visibles. L’utilisateur ou utilisatrice ne doit pas se rappeler des informations d’une partie du dialogue à l’autre. Les directives pour l’usage du système sont visibles ou facilement récupérables à chaque fois que c’est nécessaire pendant le dialogue (boutons, cartes de navigation, bonnes étiquettes et liens descriptifs, par exemple).
• Le système offre des raccourcis pour les utilisateurs et utilisatrices ayant de l’expérience. Mettre des accélérateurs permettant aux utilisateurs de faire et/ou récupérer les actions plus fréquemment utilisées (par exemple, des signet, etc).
• Le système limite autant que possible le travail de lecture (densité d’information limitée à ce qui est nécessaire), d’entrée (ne pas demander aux utilisateurs et utilisatrices d’entrer des données qui peuvent être déduites par le système) et les étapes par lesquelles doivent passer les utilisateurs et utilisatrices.
• L’interface incite l’utilisateur à effectuer des actions spécifiques en lui fournissant des indices et en le guidant.
• L’interface groupe (ou distingue) visuellement les différents éléments de manière cohérente et ordonnée, que ce soit un groupement par localisation (position des éléments les uns par rapport aux autres) ou par caractéristique graphique.
• L’interface fournit quand c’est possible des valeurs par défaut pour aider l’utilisateur ou utilisatrice à comprendre ce qui est attendu, surtout s’il n’y a pas encore de données dans le système.
• L’utilisateur ou utilisatrice peut facilement identifier les tâches qu’iel pourra accomplir sur ce site.
• L’utilisateur ou utilisatrice peut accomplir facilement les tâches.

Gestion des erreurs

• Le système met en place des moyens de détecter et prévenir les erreurs, notamment les appuis accidentels des touches ou autres actions inattendues sur une interface.
• Les messages d’erreur sont exprimés dans la langue ordinaire, sans code en indiquant précisément le problème de manière constructive, claire et compréhensible et de manière à offrir une solution aux problèmes ou au minimum comment les résoudre.
• Le système met à disposition des moyens de correction des erreurs.
• Le système protège le travail de l’utilisateur ou utilisatrice et lui permet de le récupérer en cas de souci majeur.

Expérience utilisateur et visibilité

• Les dialogues contiennent seulement les informations pertinentes et principales qui devraient être bien visibles. Les informations non pertinentes ou rarement utilisées sont placées dans les niveaux les plus bas ou les plus détaillés dans la hiérarchie de distribution du contenu.
• L’interface répond dans les plus brefs délais, avec un délai de réponse approprié et homogène selon les types de transactions aux actions des utilisateurs et utilisatrices. Dans le cas de traitements longs, des informations indiquent un traitement en cours.
• Le système informe toujours l’utilisateur ou utilisatrice sur sa localisation à travers des marquages appropriés dans un temps raisonnable. Dans ce principe, deux choses sont plus importantes : les utilisateurs et utilisatrices doivent savoir où est-ce qu’ ils ou elles sont et où est-ce qu’ils ou elles doivent aller.
• L’interface indique à l’utilisateur ou utilisatrice où il ou elle se trouve.

Contrôle utilisateur et liberté

• Le système est très « obéissant » aux actions de l’utilisateur ou utilisatrice et offre des « sorties de secours » clairement marquées pour les opérations exécutées mais non désirées, ainsi que des options de faire/défaire les opérations dans le dialogue.
• L’utilisateur ou utilisatrice doit pouvoir retourner en arrière.
• L’utilisateur ou utilisatrice doit pouvoir contrôler le déroulement des traitements des actions en cours et pouvoir interrompre ou reprendre.
• Le système doit permettre de défaire facilement les actions.

Attractivité et présentation

• Le site est intéressant et attirant, l’UI est agréable.
• L’UI du site est en accord avec les codes du domaine et les conventions de couleur.
• Le site est compatible mobile.
• Le nombre de polices utilisées sur le site est inférieur ou égal à trois (sauf présentation de travaux ou produits graphiques).

Identification

• Le nom du site est présent sur chaque page.
• La cible du site peut-être rapidement identifiée. Si le site est réservé ou destiné à un public spécifique, ce public est mentionné au moins sur la page d’accueil.

Homogénéité

• Le graphisme est cohérent et homogène sur toutes les pages du site.
• L’iconographie et les symboles utilisés tout au long du site sont homogènes et uniformes.
• Le vocabulaire utilisé sur tout le site est homogène.

Contenus

• Les informations sont formulées de manière claire et facile à comprendre pour la cible, le ton est adapté à la cible.
• Le titre de chaque page permet d’identifier le site.
• La grammaire et l’orthographe sont correctes.
• Le contenu est daté.
• Le contenu est organisé de manière claire et cohérente avec les objectifs du site.
• L’information importante sur chaque page est facile à trouver et suffisamment mise en avant.
• Le contenu est hiérarchisé (titres, sous-titres, paragraphes).
• Les icônes sont accompagnées d’une légende explicite pour faciliter la compréhension.
• Les contenus publicitaires ou sponsorisés sont identifiés comme tels.
• Les acronymes et vocabulaires techniques sont identifiés et expliqués.
• Un lexique ou un glossaire adapté au public visé explique le vocabulaire sectoriel ou technique.

Navigation

• L’utilisateur ou utilisatrice sait à tout moment où il ou elle se trouve sur le site et où il ou elle peut aller ensuite.
• Le fil d’Ariane permet à l’utilisateur ou utilisatrice de retrouver son parcours.
• Le retour à des niveaux d’arborescence supérieurs se fait facilement.
• Le site possède un moteur de recherche.
• Le site possède une page d’erreur 404 où figure le menu de navigation.
• Si toutes les pages du site ne sont pas directement accessibles sur la page d’accueil, un plan du site est accessible sur chaque page.
• Les nouvelles fenêtres dimensionnées et les fenêtres modales sont dotées d’un bouton de fermeture explicite.
• La page des résultats de recherche indique les termes recherchés, le nombre de pages de résultats, et le nombre de résultats par page.
• Les différents éléments du menu principal sont cohérents et clairement identifiés.
• Le menu identifie la page « active » sur laquelle se trouve l’utilisateur ou utilisatrice.

Interactions

• Les liens et zones cliquables sont visuellement identifiés et différenciés du reste du contenu.
• Les boutons d’action sont clairement identifiés et hiérarchisés.
• Les interactions au survol et clique sont prédictibles : l’utilisateur ou utilisatrice sait ce qu’il va se passer s’iel clique ou survole.
• Les zones sélectionnées par l’utilisateur ou utilisatrice sont clairement identifiées.
• Le site n’applique pas le même style aux liens visités et non visités.

Formulaires

• Les champs obligatoires sont correctement labellisés en tant que tels.
• Les étiquettes de champs (label) sont homogènes à travers toutes les pages du site.
• L’étiquette de chaque champ de formulaire indique, le cas échéant, quel format de saisie doit être respecté.
• La soumission d’un formulaire est suivie d’un message indiquant la réussite ou non de l’action souhaitée.

Erreurs

• Le système prévient l’utilisateur ou utilisatrice en cas d’erreur.
• Le cas échéant, il ou elle peut facilement corriger les erreurs.
• Les labels des boutons d’action des erreurs sont compréhensibles et ne laissent pas de doute quant à l’action qui sera menée.

Feedback

• L’utilisateur ou utilisatrice sait lorsqu’une action a réussi ou échoue.
• Le texte des messages d’erreur et de feedback est clair et compréhensible par un être humain.

Confiance et confidentialité

• Le site inspire confiance.
• La politique de confidentialité et de respect de la vie privée est accessible depuis toutes les pages.
• Le site propose au moins un moyen de contact.
• L’identité de l’auteur ou autrice, de la société ou de l’organisation est indiquée.
• L’objectif des cookies et les limitations inhérentes à leur refus sont expliqués.
• Le site propose une procédure de réinitialisation du mot de passe en cas de perte, de vol ou d’oubli.
• Les comptes ou abonnements ouverts en ligne peuvent être fermés par le même moyen.

Personnalisation

• Les mots de passe peuvent être choisis ou changés par l’utilisateur ou utilisatrice.
• L’utilisateur ou utilisatrice peut facilement changer les options et informations personnelles liées à son compte.

Que faire ensuite ?

Félicitations, vous avez parcouru toute la liste !

Votre interface est désormais plus accessible, et vous avez peut-être apporté des améliorations. Cependant, les évaluations heuristiques ne peuvent remplacer les études utilisateur.

La conception de l’expérience utilisateur est fortement contextuelle : les informations basées sur l’expérience utilisateur sont irremplaçables. Continuez à recueillir les retours d’autres personnes et à l’améliorer.

Pour en savoir plus

Vous souhaitez en apprendre plus sur le design accessible ou ergonomique ?

Vous pouvez vous former en autodidacte ou bien suivre une formation reconnue par l’État, comme le master CAWEB. C’est par ailleurs la seule formation multidisciplinaire, publique et ouverte à l’international dans le domaine.

Le master CAWEB forme précisément à l’exercice des métiers du design, de la communication internationale et du web, où la checklist du designer est un outil indispensable du quotidien.

Sa première année s’effectue en présentiel, mais vous pouvez directement intégrer la deuxième année si votre parcours vous le permet !

En deuxième année de master, vous avez plusieurs parcours possibles : 

• Le premier est une deuxième année classique en présentiel, vous suivrez les cours à un rythme habituel.
• Le deuxième, c’est une formation ouverte à l’alternance, se déroulant à distance et en anglais. Cela vous permettra de vous habituer à l’écoute et à la pratique de l’anglais. Vous bénéficierez également d’une (première ?) expérience en entreprise, qui prendra en charge les coûts de la formation.
• Le troisième, c’est une formation orientée design UX et accessibilité. Vous la suivrez à distance et en anglais, mais celle-ci n’est pas ouverte à l’alternance.

Vous avez des questions sur le master CAWEB ? Contactez-nous !