Le webdesign inclusif est une approche professionnelle de l’UI et de l’UX qui a pris de l'ampleur dans les années 2000. Elle vise à concevoir des sites web accessibles et utilisables par tous, indépendamment de leurs capacités ou limitations.
Cette pratique a émergé avec la prise de conscience croissante de l'importance de l'accessibilité numérique, stimulée par les avancées technologiques, les normes d'accessibilité comme les Web Content Accessibility Guidelines (WCAG) du World Wide Web Consortium (W3C), et les réglementations adoptées par certains pays.
Les principes fondamentaux à respecter
Revenons maintenant aux principes fondamentaux de la structure, des couleurs, des formes et du design d'interface utilisateur (UI).
L’architecture du site
Le site doit être logiquement structuré en suivant les principes du HTML5 sémantique. Assurez-vous que l'utilisation de balises (H1, H2, H3…) permette une compréhension du contenu de la page. Organisez les éléments de manière cohérente et intuitive, en utilisant des menus, des catégories et des sous-sections clairement identifiables.
Les espacements
Il est nécessaire de prévoir des espaces suffisants entre les différents éléments cliquables afin de réduire les risques de manipulation accidentelle. Cela est particulièrement important pour les personnes atteintes de troubles moteurs. Pour cela, vous pouvez utiliser des marges et des espaces vides pour donner une impression de clarté et de respiration à votre interface. Privilégiez les zones cliquables plutôt que des petits boutons ou des cases à cocher.
Le contraste
Le niveau de contraste des couleurs est un élément important. Il est préférable d’éviter d'utiliser un texte gris clair sur un fond blanc. Pour faciliter la lisibilité de votre site, assurez-vous que les différents éléments visuels se démarquent clairement du fond, en utilisant des combinaisons de couleurs appropriées. Des outils en ligne comme WebAIM permettent de vérifier le niveau de contraste entre deux teintes.
Le choix des couleurs
La perception des couleurs est différente d’un individu à l’autre, c’est notamment le cas des personnes atteintes de daltonisme, par exemple. Choisissez des palettes accessibles. En rendant les éléments importants clairement identifiables par tous, vous augmenterez la navigabilité de votre site. Chaque couleur doit être sélectionnée avec soin afin de guider les utilisateurs et de créer une hiérarchie visuelle claire. Un outil comme Color Safe peut vous aider à évaluer le choix de vos couleurs.
Les polices
Vous pouvez également privilégier les polices classiques et lisibles pour assurer une meilleure lisibilité. Évitez, autant que possible, les polices fantaisistes ou trop stylisées qui pourraient rendre le texte difficile à lire. Les polices les plus accessibles sont Tahoma, Calibri, Helvetica, Arial, Verdana et Times New Roman. Parmi les polices avec empattement, on trouve Arvo, Museo Slab et Rockwell.
Assurez-vous que la taille de la police soit suffisamment grande pour être confortable à lire, en particulier sur les appareils mobiles. Vous pouvez également donner la possibilité aux utilisateurs de choisir une taille de police adaptée à leurs préférences.
Les images et les vidéos
Pour rendre les images d'un site web accessibles à tous les utilisateurs, il est essentiel de suivre certaines bonnes pratiques. Utilisez l'attribut "alt" pour fournir une description textuelle concise de l'image, en décrivant son contenu et sa fonction. Assurez-vous que la description transmet l'information clé de l'image.
Pensez par ailleurs à sous-titrer les vidéos. Un outil comme HappyScribe permet de réaliser cette action parfois fastidieuse en un temps record. Les sous-titres peuvent ensuite être édités rapidement à la main pour plus de précisions.
L’affordance
L'affordance désigne la capacité d'un objet à suggérer son utilisation. Elle est essentielle pour éviter les hésitations et les frustrations. Il existe une affordance explicite, par exemple, un bouton “Connexion” qui permet de se connecter, et une affordance “pattern” qui fonctionne au moyen de raccourcis mentaux. Par exemple, le fait d’utiliser une icône de panier pour suggérer l’achat en ligne, ou encore, la fameuse icône issue d’une époque révolue, qui représente une disquette et qui suggère la sauvegarde d’un document. Veillez à ce que les utilisateurs comprennent intuitivement comment interagir avec votre interface.
Les outils et les plugins pour vous accompagner
Pas besoin de formations longues et compliquées, ni même de retenir par cœur les Web Content Accessibility Guidelines pour rendre un site ou une application accessible.
Des outils simples et pratiques vous accompagnent en temps réel. C’est le cas de Stark, une solution qui propose un grand nombre de plugins pour Figma, FigJam, Sketch, Chrome, Firefox, Safari et même Edge ou Brave. À la manière d’un correcteur d’orthographe, elle signale très simplement toutes les améliorations possibles au fur et à mesure de la conception.
Si votre équipe Produit utilise Figma, la solution propose plusieurs plugins pour les accompagner dans la création d’interfaces inclusives. Par exemple : Focus Ordered permet de prendre en compte l’utilisation du clavier plutôt que de la souris lors de la navigation.
Bref, plus d’excuses pour ne pas rendre vos pages et vos projets accessibles au plus grand nombre !
pour approfondir le sujet
Le design vous intéresse ? Consultez la fiche métier pour vous familiariser avec cette discipline. Découvrez également nos offres de formations en Product Design : Web Designer en format bootcamp, et UI/UX Designer en alternance.
