Intégration de l’accessibilité dans votre conception

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

Identifier les deux considérations principales relatives à l’utilisation de la couleur
Appliquer les couleurs, le contraste et les rapports appropriés au texte et aux icônes
Expliquer l’impact potentiel des animations sur la santé des utilisateurs

L’importance de la couleur

Dans la première unité, vous avez appris dans les grandes lignes comment divers utilisateurs comprennent et parcourent l’interface utilisateur. Dans cette unité, nous nous intéresserons aux détails de la conception. Les couleurs font souvent partie intégrante de la conception Elles peuvent être utilisées entre autres pour attirer l’attention, identifier une marque, faire passer un message et regrouper des éléments. Bien que les couleurs présentent de nombreux avantages en matière de conception, si elles ne sont pas utilisées correctement, elles peuvent créer des obstacles pour les personnes en situation de handicap.

S’agissant des couleurs et de l’accessibilité, deux principaux domaines doivent être pris en compte.

La couleur apportant une signification.
Le contraste entre les couleurs adjacentes.

La couleur comme signification

Bien que les couleurs puissent être un excellent outil pour donner du sens au contenu à l’écran, il faut éviter d’utiliser uniquement des couleurs pour présenter des informations ou pour demander de faire une action. L’image suivante est une liste d’utilisateurs d’une application de chat et un exemple typique de ce qu’il ne faut pas faire. La liste montre le statut des utilisateurs ; il est indiqué par une icône de Wi-Fi verte pour actif, orange pour inactif et rouge pour hors-ligne.

Application de chat qui affiche les contacts de l’utilisateur avec une icône Wi-Fi orange, rouge ou verte à côté du nom d’utilisateur pour indiquer s’ils sont actifs ou inactifs.

Un homme sur douze et une femme sur 200 sont daltoniens et ne seraient donc pas en mesure de distinguer si leurs contacts sont actifs ou inactifs.

Le concepteur pourrait plutôt utiliser différentes icônes pour les différents statuts, avec une couleur qui complète les informations transmises par chaque icône : l’icône Wi-Fi verte pour actif, l’icône de sommeil grise pour inactif et l’icône rouge hors ligne pour absent.

Application de chat qui affiche une liste de contacts avec une icône Wi-Fi verte, une icône de sommeil grise et une icône hors ligne rouge.

Contraste de couleur

Le deuxième élément à prendre en compte lorsque vous concevez avec des couleurs est le contraste entre la couleur du texte et l’arrière-plan sur lequel il est affiché. Vous et votre équipe d’expérience de contenu rédigez un contenu de qualité ; vous voulez vous assurer que la majorité des utilisateurs peuvent le consulter, y compris les personnes malvoyantes et celles n’utilisant pas un écran Retina haute densité.

Selon les Règles pour l’accessibilité des contenus Web (WCAG) 2.0, le rapport de contraste entre un texte et son arrière-plan doit être d’au moins 4,5 pour 1. Si la taille de votre police est d’au moins 24 px ou 19 px en gras, le minimum passe à 3 pour 1.

Cela signifie que lorsque le texte est d’au moins 24 px, ou 19 px en gras, le gris le plus clair que vous pouvez utiliser sur un arrière-plan blanc est #959595, comme ce qui suit :

Texte de grande police, en gras et écrit en gris qui indique « Je suis un gros texte » sur un arrière-plan blanc.

Pour un texte plus petit, le gris le plus clair que vous pouvez utiliser sur un arrière-plan blanc est #767676. Si votre arrière-plan est gris, le texte doit être plus sombre, ce qui donnerait ceci :

Conformément aux règles WCAG 2.0, les logos ou éléments qui ont actuellement un statut désactivé ne sont pas concernés par cette norme. C’est le cas notamment des boutons ou éléments de menu inactifs. Le texte d’espace réservé dans les champs de formulaire doit respecter cette norme.

Il convient de noter que les règles WCAG 2.1 optimisées introduisent plus d’exigences en matière de contraste de couleur. Ces exigences concernent le contraste requis pour toute information visuelle nécessaire pour identifier des composants et des états de l’interface utilisateur. Cela signifie que la règle est désormais d’un rapport 3:1 pour des éléments tels que les contours des champs de saisie et des boutons, les états de focus et même les parties visuelles d’un graphique. Observez le champ de saisie de données ci-dessous : Exemple de champ de saisie de données répondant à l’exigence de rapport 3:1 pour les contours du champ de saisie.

Le rapport de contraste entre la bordure de cette saisie de texte et l’arrière-plan de la page doit être d’au moins 3:1. Dans ce cas, la page étant blanche, la couleur de la bordure ne doit pas être plus claire que #959595.

Il existe de nombreux outils de calcul du rapport de contraste qui sont disponibles en ligne, dans les outils de conception et même dans les outils de développement des navigateurs. L’un de nos préférés est www.AreMyColorsAccessible.com.

Texte sur des arrière-plans non unis

Lorsque vous avez du texte sur des images ou des arrière-plans non unis, tels que des dégradés, il est souvent difficile de le lire. Vous devez au moins vous assurer que le texte répond aux exigences de contraste de couleur sur la partie de l’image la plus proche de la couleur du texte : si le texte est clair, la partie la plus claire de l’image et si le texte est foncé, la partie la plus sombre de l’image. Cependant, les utilisateurs atteints de troubles cognitifs tels que la dyslexie peuvent avoir du mal à discerner le texte sur des arrière-plans non unis. C’est pourquoi il est préférable de placer le texte sur une partie unie de l’image ou d’ajouter un arrière-plan uni entre le texte et l’image.

Ci-dessous, le texte d’en-tête Einstein (10) se trouve sur une image avec des nuages :

Le texte d’en-tête se trouve sur des nuages dans l’image.

Il vaut mieux déplacer le texte d’en-tête Einstein (10) vers la partie bleue unie de l’image au lieu de le laisser sur des nuages :

Le texte d’en-tête se trouve sur l’arrière-plan bleu uni de l’image et les nuages sont en dessous.

Si vous préférez avoir du texte sur des arrière-plans non unis, suivez ces instructions pour minimiser la charge visuelle et cognitive de l’utilisateur :

Seul un texte d’en-tête peut apparaître sur un arrière-plan non uni. Le texte doit faire au moins 18 px et, idéalement, tenir sur une seule ligne. Les chaînes de texte plus longues peuvent être plus difficiles à parcourir si l’arrière-plan varie légèrement entre chaque mot ou ligne.
Les arrière-plans ne peuvent être dégradés qu’à la verticale (la couleur du haut est différente de celle du bas). Évitez les dégradés horizontaux, diagonaux et radiaux, qui risquent d’entraîner un changement de la couleur d’arrière-plan derrière chaque caractère.
Définissez toujours une couleur d’arrière-plan de secours. Certains utilisateurs désactivent les images d’arrière-plan en raison de problèmes d’accessibilité. Assurez-vous donc que même lorsque l’image d’arrière-plan est désactivée, le texte reste lisible et satisfait aux exigences de contraste (4,5:1).

Pour en savoir plus sur l’épaisseur de la police, le flou d’ombre de texte et d’autres recommandations techniques, consultez les instructions du système de conception Salesforce Lightning Design System (SLDS) concernant le texte sur des arrière-plans.

Amélioration de l’expérience utilisateur avec des animations

Les animations peuvent améliorer l’expérience des utilisateurs atteints de troubles cognitifs. Elles peuvent également aider les utilisateurs à s’orienter dans une interface utilisateur, à les guider vers des appels à l’action et à créer des relations ou une hiérarchie entre les éléments d’une page. Cependant, une animation est une arme à double tranchant et, si elle est mal conçue, elle peut provoquer des maux de tête, des nausées, des étourdissements ou des vertiges aux utilisateurs atteints de troubles vestibulaires. En outre, dans certains cas, les animations provoquent des crises chez les personnes atteintes d’épilepsie photosensible.

Il ne faut absolument pas oublier que si une fonctionnalité inaccessible peut empêcher un utilisateur de percevoir des informations ou de faire fonctionner un produit, une animation inaccessible peut, quant à elle, nuire à la santé d’un utilisateur. Les directives WCAG ont deux exigences cruciales que tout le Web doit respecter.

Les flashs ou les clignotements. Conformément à la règle WCAG 2.3.2 Trois flashs, évitez les animations qui flashent ou clignotent plus de 3 fois par seconde. Les animations qui clignotent rapidement peuvent autrement provoquer des crises chez certains de vos utilisateurs.
Une durée supérieure à 5 secondes. Conformément à la règle WCAG 2.2.2 Mettre en pause, arrêter, masquer, toute animation qui dure ou se répète pendant plus de 5 secondes doit comporter un moyen de mise en pause, d’arrêt ou de masquage de l’animation.

Peu importe le fait que vos animations soient géniales et très accessibles, le plus important est de permettre aux utilisateurs de les désactiver. Le carrousel SLDS est un excellent exemple de composant d’animation avec un bouton pause.

Première image d’un diaporama animé en trois parties avec Appy faisant signe devant des arbres et des montagnes. Il est écrit : « Visitez AppExchange. Étendez Salesforce avec la première place de marché d’entreprise au monde. » Un bouton pause est encadré pour le mettre en évidence.

À bas les étourdissements

Trois facteurs peuvent contribuer à déclencher des étourdissements, des maux de tête ou d’autres formes d’inconfort chez certains utilisateurs.

La taille du mouvement par rapport à la taille de l’écran. L’animation est-elle grande ou petite ? Les animations volumineuses peuvent être plus dérangeantes que les plus petites.
Des mouvements aux directions opposées. Certaines animations déplacent des objets dans des directions opposées. C’est une pratique courante dans les effets de parallaxe, lorsque l’arrière-plan défile vers le haut pendant qu’un utilisateur fait défiler la page vers le bas. Ces styles d’animation peuvent être très déroutants pour les utilisateurs.
La distance parcourue telle que perçue par l’utilisateur. Les animations qui ont de la profondeur, comme celles représentant de grands paysages, peuvent également désorienter les utilisateurs.

En bref

La couleur, l’animation et le mouvement sont des techniques de conception importantes. Lorsque vous utilisez des couleurs et des animations, assurez-vous de fournir des moyens visuels alternatifs pour transmettre les informations communiquées par ces techniques. Lorsque vous utilisez des animations, veillez à éviter celles qui nuiront à la santé de certains utilisateurs.