Ressources d’accessibilité pour UX et UI designers
En mai 2023, j’ai eu le plaisir d’intervenir en conférence lors des Flupa UX Days 2023 pour sensibiliser les professionnels du design numérique et de l’expérience utilisateur à la prise en compte du handicap dans le numérique : Comprendre pourquoi et comment intégrer l’accessibilité numérique (vidéo et transcription).
Lors de cette intervention, j’ai rapidement fait référence à quelques ressources pratiques, accessibles et didactiques à destination des UX et/ou UI designers. Afin de les retrouver plus rapidement, en voici un récapitulatif. N’hésitez pas à le commenter et à le compléter d’autres guides, checklists ou outils qui vous semblent pertinents.
Nous publierons également, ultérieurement, sur ce blog, la présentation, la vidéo et la transcription de cette conférence.
Accessibility for UX and UI Designers
This is a starter guide for UX and UI Designers about delivering accessible websites. As a designer you’re an advocate for the user. You’re responsible for making sure the product is useful and usable for all users, including those with disablities.
Accessibility Guidelines – The Checklist
Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project.
Accessibility Not-Checklist
The Not-Checklist acts as a guide to make sure you haven’t missed anything. If you’re new to accessibility, the resource provides a foundation – it’s an overview of what you’ll need to consider, but it won’t teach you WCAG from front to back.
Designer un web accessible et inclusif
Ressources pour concevoir des services utiles et utilisables pour toutes et tous.
Online Accessibility Toolkit – User experience (UX)
Digital things like websites and apps work best when they’re created so everyone can use them. Using this toolkit helps you create digital platforms and content that are accessible. If you create something with accessibility in mind, the whole community benefits. As you go, you’ll also discover the importance (and many benefits) of human-centred design.
W3C WAI – Resources for Designers
This page provides a starting point for information that is particularly relevant to visual designers and user interface designers.
Accessibility for user experience (UX) designers
Accessibility is usability for people who interact with products differently. Your role is to help the team approach accessibility as a facet of user experience rather than checklist of requirements.
Access Guide
Welcome to Access Guide, a friendly introduction to accessibility! Browse the cards below to learn more about the guidelines.
Retrouvez également davantage de contenus sur notre page de ressources d’accessibilité numérique.
Très bonne sélection !
Je complète avec deux ressources en français que j’aime bien partager :
L’excellent article/conférence de Stéphanie Walter : Documenter l’accessibilité en phase de design !
La Notice d’accessibilité fonctionnelle et graphique d’AccedeWeb, plus toute jeune mais toujours pertinente
Bonjour Anne-Sophie,
En effet, sélection sympa, merci encore pour le chouette boulot que tu fais sur design-accessible.fr !
Et merci pour les liens complémentaires.
Merci Sébastien et Idéance pour cet article.
Je me permets de proposer quelques compléments à cette très bonne sélection !
(merci aussi à Anne-Sophie pour les 2 compléments, je les trouve hyper pertinents également)
Qui dit « UX/UI design » dit (très souvent) « outil Figma », donc je liste ici quelques plugins orientés « accessibilité numérique » à installer gratuitement dans cet outil :
1) Contrast grid (top pour tester très rapidement vos contrastes sur toutes les combinaisons des couleurs de votre design system : text / background)
2) Able (pour tester les contrastes sur une sélection dans une maquette, et simuler le daltonisme afin de vérifier un design vis à vis de cette déficience)
3) A11Y – Focus order (pratique pour annoter les maquettes et préciser l’ordre de tabulation pour la navigation au clavier)
Remarque : pour le contraste, il y en a pléthore, donc libre à vous de choisir celui qui vous conviendra le mieux !
(tips : copier/coller l’url ci-dessous dans votre navigateur et laisser la magie opérer)
Plugin results for contrast (Figma)
Pour sensibiliser vos équipes au sujet de l’accessibilité numérique, je recommande :
1) cette vidéo : L’accessibilité numérique à toutes les étapes d’un projet pour les 2 messages clés suivants :
– il ne faut pas attendre la phase de développement pour se poser la question de l’accessibilité dans un projet web, mais il faut poser le sujet le plus tôt possible, idéalement dès la phase de cadrage avec toutes les parties prenantes
– il ne faut pas compter que sur les développeurs et/ou les designers pour mettre en place l’accessibilité numérique, c’est une problématique qui est 100% pluridisciplinaire et transverse, donc chaque acteur d’un projet a un rôle à jouer !
2) cet outil de simulation de plusieurs déficiences : daltonisme, déficiences visuelles telles que DMLA ou la cataracte , handicap moteur (tremblements de la main, à cause de Parkinson) : L’accessibilité numérique, et si nous agissions ?
(également disponible en anglais : Digital Accessibility: How We Can Help)
Enfin, je rappelle que Access42 a créé et mis à disposition de tous un petit outil de type « style switcher », simple et efficace. Il est Open Source donc gratuit. Pour le télécharger, suivez ce lien : AccessConfig.
J’espère que ce partage de quelques ressources complémentaires sera utile à la communauté !
Bonjour Tanguy,
Merci pour ce partage de ressources très complet et pratique.