Dans notre Rapport sur l’accessibilité numérique, nous vous avons préparé des checklists et conseils pour vous aider à mieux appréhender l’inclusive design.
Puisque l'accessibilité numérique est indispensable et touche 30% des utilisateurs des sites, voici quelques pistes afin d’améliorer l’expérience utilisateur de TOUS vos utilisateurs. Retrouvez ci dessous des exemples de design inclusif que vous pouvez répliquer sur votre site web.
SOMMAIRE
Rappel : comment définir le design inclusif d’un site ?
Le design inclusif commence par un design simple et sobre
Vérifiez votre ratio de contraste pour un design inclusif visible
Design inclusif : facilitez l’accès aux graphiques et couleurs
Ajouter des sous-titres et des closed captions aux vidéos
Rappel : comment définir le design inclusif d’un site ?
Comment définiriez-vous le design inclusif ? Question complexe, tant le sujet est relativement récent. Vous pensez peut-être qu’il s’agit d’un défi complexe, que seuls les plus talentueux UX designers et experts en accessibilité peuvent relever… Faux : définir l’accessibilité en webdesign est plutôt simple, en réalité.
Qu’est-ce qu’un design accessible ? C’est créer des sites Web utilisables par tous – quel que soit l’âge, le handicap ou la situation de l’utilisateur.
Cela se traduit par des actions concrètes : simplifiez votre site pour que les utilisateurs de lecteurs d’écran puissent naviguer facilement ; supprimez les liens colorés pour que les personnes daltoniennes puissent les repérer ; proposez des polices suffisamment grandes pour que les individus malvoyants puissent les lire. De ce point de vue, le design accessible n’est plus une utopie, mais une réalité facile à mettre en œuvre : tout ce dont vous avez besoin, c’est d’un minimum de connaissances et de réflexion.
Alors que plus d’un milliard de personnes dans le monde sont atteintes d’un handicap qui impacte leur utilisation du Web, un webdesign accessible est une nécessité pour garantir une égalité d’accès et d’opportunités. Autisme, daltonisme, paralysie… Il existe des milliers de raisons pouvant rendre l’utilisation d’Internet difficile, voire impossible – c’est pourquoi il est indispensable de proposer un site Web accessible proposant des expériences inclusives et ça passe notamment par le design inclusif.
Voici quatre éléments à prendre en compte dès aujourd’hui pour améliorer l’accessibilité digitale de votre site en termes de design inclusif.
Le design inclusif commence par un design simple et sobre
Les personnes autistes ou atteintes d’autres troubles cognitifs ont souvent une hypersensibilité sensorielle, c’est pourquoi elles peuvent se laisser distraire par des pages Web surchargées. Utilisez les mêmes polices, couleurs et hiérarchies de contenu partout sur votre site – une cohérence et une simplicité qui sera appréciée des utilisateurs autistes.
Si votre site multiplie les couleurs ou présente de nombreux éléments par page, alors vous devrez sans doute repenser son design inclusif. Qui dit accessibilité, dit simplicité : un site Web clair et concis séduira les utilisateurs atteints de handicaps, mais également tous les autres.
Vérifiez votre ratio de contraste pour un design inclusif visible
Le ratio (ou rapport) de contraste est une valeur comprise entre 1 et 21 (1 = même couleur, 21 = noir/blanc) qui détermine la qualité du contraste entre le texte et son arrière-plan.
Un ratio de contraste accessible aide les personnes malvoyantes ou atteintes d’une cataracte, d’un glaucome ou d’une autre pathologie visuelle à interagir avec votre site. Un manque de contraste police/arrière-plan inclura un grand nombre d’utilisateurs.
Design inclusif : facilitez l’accès aux graphiques et couleurs
Grâce au design inclusif, l’accessibilité des couleurs permet à chaque utilisateur d’accéder aux mêmes informations – quel que soit son handicap. Les personnes daltoniennes ne peuvent lire des graphiques basés uniquement sur les couleurs : utilisez des textures différentes dans les tableaux, histogrammes, etc. afin que chacun puisse comprendre les données affichées. De même, n’hésitez pas à remplacer les légendes par des étiquettes de données (directement sur les graphiques).
Exemple d'un graphique avec du relief et des couleurs pour faciliter la compréhension
Ajouter des sous-titres et des closed captions aux vidéos
Légendes et sous-titres permettent à chacun de profiter et d’interagir avec votre contenu. Les personnes atteintes de déficiences auditives sont incluses dans l’expérience vidéo, mais ce n’est pas tout : chacun peut, s’il le souhaite, couper le son de la vidéo et tout de même en comprendre le contenu de votre site via un design inclusif.
L’utilisateur doit avoir la possibilité de couper entièrement le son d’une vidéo - terminé, les vidéos qui « chuchotent » dans le train ! Vous souhaitez insister sur un point important de votre vidéo ? Soulignez ou changez la couleur du texte, pour un impact maximal.
Katie is Contentsquare’s Global Content Manager. With five years of content experience both agency and client-side, she knows a thing or two about creating content that drives traffic, engages, and converts. She enjoys reading, red wine, and going to bed early. She’s also pretty fond of rooftops and is rarely seen without freshly painted nails.