Notices d’accessibilité fonctionnelle et graphique
Ensemble des éléments à prendre en compte pour les maquettes ergonomiques (storyboards, wireframes) et graphiques.
Cette checklist est un point de départ pour concevoir un produit accessible. Elle vous aidera à améliorer l’expérience utilisateur des personnes en situation de handicap.
Le contenu est un moyen simple d’apporter de l’information et du contexte.
Une page accessible doit pouvoir être lue rapidement et facilement. Les gros blocs de textes sont intimidants et fastidieux à lire. Pour rendre un texte facile à lire, privilégier :
Ressources
L’objectif d’un lien doit être clair, même sans contexte. Cela sera particulièrement utile aux personnes utilisant un lecteur d’écran.
Ressources
Une bonne hiérarchie de titres permet aux utilisateurs de :
Pour cela, la hiérarchie doit être complète (pas de trous entre les titres de niveaux 1, 2, 3…) et les titres porteurs de sens.
Ressources
Les termes utilisés sur le site doivent être cohérents. Cela rend le service familier et prévisible. Après avoir appris une fonctionnalité, l’utilisateur la retrouve plus facilement ensuite.
Ressources
Les couleurs sont un excellent moyen d’apporter de l’information, à condition d’être perceptibles.
Les contrastes entre un texte et son arrière-plan doivent être d’au moins 4,5:1. Pour les textes de grandes tailles (plus de 24 px) ou en gras, le contraste peut être de 3:1. De nombreux outils permettent de mesurer ce ratio de contraste.
Ressources
Les éléments d’interfaces interactifs doivent être facilement identifiables. Pour cela, le contraste avec l’arrière plan doit être suffisant. Cela concerne :
Ressources
Utiliser la couleur pour communiquer une information à l’utilisateur est une bonne chose. Le rouge est souvent utilisé pour indiquer des erreurs par exemple. Mais la couleur ne doit pas être l’unique moyen de communiquer cette information. Pour un champ de formulaire en erreur, on peut coupler l’information avec une icône.
Cela sera utile pour les personnes dont la vision des couleurs est limitée.
Ressources
Les formulaires ont un fort impact sur l’accessibilité :
Le libellé d’un champ est indispensable. Il indique à une personne ce qu’elle doit renseigner. Les placeholders ne peuvent pas remplir ce rôle : ils sont peu lisibles, et non accessibles aux personnes utilisant un lecteur d’écran.
Ressources
Avant de soumettre un formulaire, l’utilisateur doit pouvoir vérifier et corriger ses informations sensibles saisies :
Ressources
Lorsque qu’une personne fait une erreur en remplissant un formulaire :
Les erreurs doivent être détectées à la validation (et pas pendant que la personne est en train de saisir).
Ressources
Remplir un formulaire (par exemple cliquer sur un bouton radio) ne doit pas provoquer d’événements surprenants :
Ressources
Indiquer les champs obligatoires d’un formulaire facilite la vie des utilisateurs.
Ressources
L’accessibilité concerne aussi l’usabilité au sein du site pour tous les usagers.
Le site doit être accessible sur un écran de 320px de large (par exemple un iPhone 5), sans barre de défilement horizontale. Les utilisateurs doivent retrouver le même contenu et les mêmes fonctionnalités que sur un grand écran.
Ressources
Les contenus cachés (comme une info-bulle) doivent être facile d’accès :
Note : le plus souvent, les textes d’info-bulles mériteraient d’être toujours présents 😇.
Les gens pensent différemment. En proposant plusieurs moyens de navigation, on permet à chacun de s’y retrouver facilement. La navigation peut se faire par :
Ressources
Certaines personnes ne peuvent pas changer l’orientation de leur support. C’est le cas des personnes dont l’appareil est fixé à un fauteuil roulant par exemple.
Ressources
L’accessibilité se pense au moment de définir un produit et son usage, avant même de penser aux interfaces.
Les zones tactiles doivent être suffisamment grandes (au moins 44 × 44 pixels) et éloignées les unes des autres.
Cela sera utile :
Ressources
Les animations peuvent nuire à la concentration. Les contenus qui clignotent, défilent ou s’animent doivent :
Ressources
Les gestes effectués sur un écran tactile doivent être aussi faciles que possible :
Les fonctionnalités activables via des gestes complexes doivent l’être aussi de manière alternative.
Le rôle du designer est de penser à l’accessibilité au-delà de ses maquettes. Ses livrables peuvent comporter des informations additionnelles qui serviront l’accessibilité.
Chaque page doit avoir un titre unique et utile qui indique le but de la page.
Ressources
Les contenus visuels et audio ont besoin d’alternatives textuelles. Cela permet à tout le monde d’avoir le même niveau d’information.
Ressources
Les utilisateurs ont besoin d’avoir du feedback sur leurs interactions :
Ressources
Les personnes qui naviguent au clavier ou via un lecteur d’écran ont besoin de raccourcis pour arriver au contenu qui les intéresse. Des liens d’évitements permettent cela :
Ressources
Ensemble des éléments à prendre en compte pour les maquettes ergonomiques (storyboards, wireframes) et graphiques.
Guide de démarrage en anglais pour les concepteurs d’UX et d’UI sur la création de sites Web accessibles.
Critères d’accessibilité sous forme d’heuristiques pour évaluer l’accessibilité d’interfaces.
Critères d’accessibilité du WCAG rédigés en anglais simplifié et illustrés d’exemples.