Accessibilite pour les designers : creer un design visuel et interactif inclusif

Un site web accessible commence par un design accessible. Nombre des problemes d'accessibilite les plus courants — contraste de couleurs insuffisant, navigation confuse, mises en page deroutantes, indicateurs de focus manquants — trouvent leur origine dans des decisions prises pendant la phase de conception. Lorsque le code est ecrit, ces problemes sont ancres, et les corriger necessite de reconcevoir plutot que de simplement ajuster le code.

En tant que designer, vous avez plus d'influence sur l'accessibilite que presque n'importe qui d'autre dans l'equipe. Les choix que vous faites concernant les couleurs, la typographie, l'espacement, les modeles de navigation et les modeles d'interaction determinent si des millions d'utilisateurs peuvent interagir efficacement avec votre produit.

Contraste des couleurs

Un contraste de couleurs insuffisant est l'un des problemes d'accessibilite les plus repandus sur le web. Le WCAG exige un ratio de contraste minimum de 4,5:1 entre le texte et son arriere-plan pour le texte de taille normale, et de 3:1 pour le texte de grande taille (defini comme 18pt normal ou 14pt gras). Au niveau AAA, l'exigence augmente a 7:1 pour le texte normal et 4,5:1 pour le texte de grande taille.

Ces ratios existent parce que les personnes malvoyantes, les personnes agees ou celles ayant des deficiences de la vision des couleurs ont besoin d'un contraste suffisant pour distinguer le texte de son arriere-plan. Un texte gris clair sur un fond blanc peut paraitre elegant dans une maquette, mais devient illisible pour un pourcentage significatif d'utilisateurs.

Les elements non textuels ont egalement des exigences de contraste. Les composants de l'interface utilisateur — boutons, champs de formulaire, icones, indicateurs de focus — et les objets graphiques significatifs doivent maintenir un ratio de contraste d'au moins 3:1 par rapport aux couleurs adjacentes. Cela garantit que les utilisateurs peuvent identifier les elements interactifs et comprendre les graphiques informatifs.

Utilisez des outils de verification du contraste tout au long de votre processus de conception, pas seulement a la fin. Des outils comme le WebAIM Contrast Checker ou le Colour Contrast Analyser vous permettent de verifier les ratios avant de vous engager sur une palette de couleurs.

La couleur comme information

La couleur ne doit jamais etre le seul moyen visuel de transmettre une information. Si vous utilisez le rouge pour indiquer les erreurs et le vert pour indiquer le succes, les utilisateurs daltoniens peuvent ne pas etre en mesure de distinguer les deux etats. Completez toujours la couleur par des indicateurs supplementaires — icones, etiquettes textuelles, motifs ou soulignements.

Cela s'applique egalement aux liens. Si les liens dans un bloc de texte ne se distinguent que par la couleur, ils doivent respecter un ratio de contraste de 3:1 par rapport au texte environnant ou etre completes par un autre indicateur visuel tel qu'un soulignement.

Typographie et taille du texte

Tout le texte de votre site web doit pouvoir etre agrandi jusqu'a 200 % sans aucune perte de contenu ni de fonctionnalite. Cela signifie concevoir avec des unites flexibles et relatives plutot que des tailles fixes en pixels, et s'assurer que vos mises en page s'adaptent harmonieusement lorsque le texte est agrandi.

WCAG 2.2 inclut egalement des exigences pour l'espacement du texte. Les utilisateurs doivent pouvoir ajuster la hauteur de ligne a au moins 1,5 fois la taille de la police, l'espacement des paragraphes a au moins 2 fois la taille de la police, l'espacement des lettres a 0,12 fois la taille de la police et l'espacement des mots a 0,16 fois la taille de la police — sans aucune perte de contenu ni de fonctionnalite.

Design des liens

Les liens doivent etre visuellement distincts du texte environnant. Ils doivent etre descriptifs et concis, indiquant aux utilisateurs ce qu'ils trouveront en suivant le lien. N'utilisez jamais « cliquez ici » ou « en savoir plus » comme texte de lien sans contexte supplementaire, car ces expressions sont depourvues de sens pour les utilisateurs de lecteurs d'ecran qui naviguent par listes de liens.

Navigation et coherence

La navigation doit etre coherente sur toutes les pages de votre site. Les utilisateurs qui s'appuient sur la navigation au clavier ou les lecteurs d'ecran construisent un modele mental de la structure de votre site, et les changements inattendus perturbent ce modele. Le WCAG exige que les mecanismes de navigation apparaissant sur plusieurs pages conservent le meme ordre relatif a chaque fois, et que les composants ayant la meme fonctionnalite soient identifies de maniere coherente.

Indicateurs de focus

Lorsqu'un utilisateur navigue sur votre site avec un clavier, un indicateur visible doit montrer quel element a actuellement le focus. Cet indicateur de focus doit etre clairement visible — WCAG 2.2 exige qu'il ne soit pas masque par d'autre contenu (SC 2.4.11) et, au niveau AAA, que l'indicateur de focus complet et le composant focalise soient entierement visibles (SC 2.4.12).

Concevez les indicateurs de focus de maniere intentionnelle. Le contour par defaut du navigateur est souvent insuffisant ou supprime par les reintialisations CSS. Concevez un style de focus personnalise qui a un contraste suffisant et qui est visuellement proeminant.

Taille des cibles tactiles

Les elements interactifs doivent etre suffisamment grands pour etre actives sans difficulte. WCAG 2.2 exige que les cibles interactives mesurent au moins 24x24 pixels CSS (SC 2.5.8), y compris tout espace blanc entourant la cible. Au niveau AAA, l'exigence augmente a 44x44 pixels (SC 2.5.5). Cela profite aux utilisateurs ayant des handicaps moteurs, des tremblements ou une dexterite limitee, ainsi qu'a toute personne utilisant un appareil mobile dans un environnement agite.

Design de formulaires

Les formulaires sont l'un des domaines les plus critiques pour un design accessible. Chaque champ de formulaire necessite un libelle clairement visible qui indique a l'utilisateur quelle information fournir. Les messages d'erreur doivent etre specifiques, visibles et positionnes pres du champ auquel ils se referent. Fournissez des instructions la ou c'est necessaire, et evitez de vous fier uniquement au texte d'espace reservee comme libelle — le texte d'espace reservee disparait lorsque l'utilisateur commence a taper et a souvent un contraste insuffisant.

Concevez pour la prevention des erreurs. Permettez aux utilisateurs de verifier et corriger leur saisie avant l'envoi, en particulier pour les actions aux consequences importantes comme les transactions financieres ou les accords juridiques. Lorsque des erreurs sont detectees, fournissez des suggestions claires pour les corriger.

Mouvement et animation

Certains utilisateurs souffrent de crises d'epilepsie, de migraines ou de vertiges en presence de contenu anime ou clignotant. Rien sur votre site web ne doit clignoter plus de trois fois par seconde. Fournissez des controles pour mettre en pause, arreter ou masquer tout contenu qui bouge, clignote ou deffle pendant plus de cinq secondes. Respectez le parametre « prefers-reduced-motion » du systeme d'exploitation et fournissez des alternatives a mouvement reduit pour les animations.

Images de texte

Evitez d'utiliser des images de texte sur votre site web. Le vrai texte peut etre redimensionne, reformate et lu par les technologies d'assistance. Les images de texte ne le peuvent pas. Les seules exceptions sont les logos et les situations ou une presentation visuelle particuliere du texte est essentielle a l'information transmise.

Checklist d'accessibilite pour les designers

Avant de transmettre un design au developpement, verifiez : les ratios de contraste respectent les exigences pour tout le texte et les elements interactifs ; la couleur n'est jamais le seul indicateur d'information ; les etats de focus sont concus pour tous les elements interactifs ; les cibles tactiles respectent les exigences de taille minimale ; la navigation est coherente sur toutes les pages ; les etats d'erreur et les messages sont clairement concus ; le texte peut etre agrandi sans casser les mises en page ; les animations respectent les preferences des utilisateurs ; et tout le contenu non textuel a des alternatives textuelles prevues.