UX/UI: 7 bonnes pratiques de conception universelle

Rien qu’en France, 12 millions de personnes vivent avec un certain degré de handicap. Comme tout le monde, elles font des recherches sur le Web, réalisent des achats en ligne, visionnent des films en streaming, utilisent des applications et consultent des contenus numériques. Il n’est donc pas surprenant qu’elles souhaitent, attendent et méritent un accès approprié à vos produits.

Chaque concepteur d’interface (UI) et d’expérience utilisateur (UX) devrait se soucier de l’accessibilité et de l’inclusion.

Après tout, les bons produits numériques sont destinés à être utilisés par tout le monde et l’accessibilité permet aux personnes souffrant de troubles visuels, moteurs, auditifs, de la parole ou cognitifs de tirer le meilleur parti possible de votre produit. Proposer une conception universelle ne signifie pas alourdir l’interface ou l’expérience utilisateur.

En réalité, la plupart des designers se réjouissent de relever ce défi. Les contraintes stimulent la créativité et révèlent de nouvelles façons d’aborder une problématique : chaque point de vue supplémentaire que vous prenez en considération permet d’enrichir l’expérience offerte par votre produit.

Qu’est-ce que la conception universelle pour un concepteur/designer UX/UI ?

La conception universelle implique de créer des modèles répondant aux différents besoins des utilisateurs de vos produits. Pour bien l’aborder, posez-vous les questions suivantes :

• Une personne daltonienne ou malvoyante pourrait-elle passer à côté de détails fondamentaux dans votre UX/UI ?
• Une personne sourde ou malentendante pourrait-elle manquer des notifications ou des alertes dans votre application ?
• Une personne ayant des problèmes de motricité pourrait-elle rencontrer des difficultés pour parcourir votre site Web ?

Comment pouvons-nous identifier les besoins de chaque utilisateur imaginable ou ce que nous devons faire pour améliorer l’expérience offerte par le produit ? Il est toujours bon de commencer par un ensemble de lignes directrices formelles.

Bonnes pratiques de conception universelle pour l'UX/UI

Les bonnes pratiques de conception universelle sont définies par le Groupe de travail sur les règles d’accessibilité.

Pour vous assurer que votre travail est conforme aux critères d’accessibilité de l’amendement Section 508, reportez-vous aux Règles pour l’accessibilité des contenus Web 2.1 (WCAG pour les intimes).

Vous pouvez dès maintenant les ajouter à vos favoris, car vous aurez besoin de les consulter fréquemment pour orienter votre conception universelle UX/UI.

Quels que soient la capacité, le contexte ou la situation des utilisateurs, vous trouverez toujours un moyen de rendre votre UX/UI plus accessible. C’est un peu comme modifier un produit pour inclure une nouvelle fonctionnalité ou étendre sa compatibilité afin d’attirer encore plus de clients.

Quel que soit le handicap d’un utilisateur – moteur, cognitif, auditif ou visuel – il existe toujours plusieurs approches pour permettre de faciliter l’accès au plus grand nombre.

Néanmoins, il convient de garder à l’esprit certaines bonnes pratiques et règles générales. 

N’utilisez pas seulement la couleur comme moyen visuel pour transmettre des informations

Les textes en couleur sont difficiles, voire impossibles, à lire sur des arrière-plans présentant une couleur proche. Maintenant, imaginez que vous faites partie des 2,2 milliards de personnes souffrant d’un handicap visuel et de cécité pratique qui essaient de déchiffrer du contenu Web avec la couleur pour seul indicateur visuel.

Même les 8% de Français daltoniens (incapables de distinguer le rouge du vert) ont du mal à lire un texte en couleur sur un écran. Pour remédier à ce genre de situation, utilisez des bordures épaisses, du texte en gras, en italique ou souligné dans vos créations. Évaluez vos pages en noir et blanc pour déterminer leur lisibilité.

Lorsque vous affichez des erreurs à l’écran, ajoutez des icônes ou des symboles. Vous voulez vérifier que votre mise en page correspond bien au rapport couleur-contraste des WCAG ? Utilisez l’application Contrast pour Mac ou le vérificateur de contraste WebAIM en ligne.

Quelle que soit la solution que vous choisissez en matière d’accessibilité, efforcez-vous de laisser de côté tous vos préjugés en faveur des textes en couleur.

Rehaussez le contraste entre votre texte et son arrière-plan

Le contraste (ou l’absence de contraste) entre le texte et l’arrière-plan complique la lecture du contenu présenté pour la plupart des utilisateurs de votre produit... Alors imaginez l’expérience vécue par les malvoyants !

Pour vous faire une idée précise de cette difficulté, éloignez-vous de votre écran Retina (l’objectif par lequel la plupart des designers voient le monde) et trouvez une salle de conférence avec un projecteur. Ensuite, branchez un adaptateur VGA sur votre MacBook et découvrez à quoi ressemblent vos interfaces et expériences utilisateur à faible contraste pour les personnes souffrant d’un handicap visuel.

Attention spoiler pour les personnes qui tentent cet exercice : vos créations à faible contraste deviennent floues et les couleurs indistinctes.

Pour autant, appliquer des principes de conception universelle pour ne pas exclure les utilisateurs dont la vue est faible ou se détériore (notamment les daltoniens) est une tâche remarquablement simple. Le secret ? Rehausser le contraste. Pour résumer, le rapport de contraste entre le texte et son arrière-plan doit être d’au moins 4,5 pour 1.

Les WCAG citent quelques exceptions à ce rapport de contraste :

• Si la taille de votre police est d’au moins 24 px (ou 19 px si elle est en gras), ce rapport minimum peut être ramené à 3 pour 1.
• Le texte (ou les images du texte) d’un composant inactif de l’interface utilisateur n’est pas soumis à des exigences de contraste.
• Le texte d’un logo d’entreprise, d’une marque ou d’un logotype n’est pas non plus soumis à ces exigences.

De plus, les WCAG suggèrent également des couleurs plus contrastées à ajouter à la palette générale de couleurs de votre UX/UI. Attention, de nombreux concepteurs d’UX et d’UI découvrent qu’ils préfèrent au final travailler avec des couleurs plus contrastées !

Ajoutez des étiquettes ou des instructions aux champs de formulaire et de saisie

Le design « moderne » privilégie une approche minimaliste. Souvent, cela se traduit par la suppression de toute limite clairement définie ou de toute étiquette visible dans les champs de formulaire. C’est certes l’idéal pour une esthétique épurée, mais un véritable enfer pour les personnes souffrant de handicaps cognitifs ou de mobilité réduite. Faites donc attention à ces éléments.

Les utilisateurs souffrant de handicaps cognitifs peuvent avoir des difficultés pour localiser les champs de formulaire et interagir avec eux sans les repères visuels habituels. Les textes d’exemple intégrés aux champs ne sont pas aussi explicites qu’une description écrite.

Pour les personnes à mobilité réduite ou limitée, savoir où cliquer (ou simplement avoir un champ cible de taille suffisante pour le sélectionner) fait une grande différence, en particulier pour celles qui utilisent des dispositifs de pointage adaptatifs ou d’autres technologies adaptatives facilitant l’accessibilité.

Lorsque les concepteurs suppriment ou masquent des étiquettes ou des instructions dans les formulaires, le design gagne en élégance, mais perd en ergonomie.

Les personnes qui utilisent des lecteurs d’écran pour parcourir les champs de formulaire dépendent également des étiquettes pour leur navigation. Ces dispositifs ignorent automatiquement le texte qui ne figure pas sur une étiquette, notamment les textes d’exemple intégrés aux champs. Pensez donc à ajouter systématiquement des étiquettes et des limites de formulaire bien définies.

Facilitez la navigation grâce à des indicateurs de sélection

D’ici 2025, près des trois quarts des internautes du monde entier accéderont au Web uniquement via leur smartphone. Cela pourrait également signifier qu’un nombre encore plus restreint de sites Web proposeront des indicateurs de sélection à leurs utilisateurs.

Les indicateurs de sélection permettent de signaler aux utilisateurs qu’ils ont sélectionné un élément de l’interface d’un site Web à l’aide de leur clavier ou de leur voix. Il s’agit du seul repère visuel offrant cette information. Accédez à un site depuis votre ordinateur portable ou de bureau et appuyez plusieurs fois sur la touche de tabulation. 

Observez les indicateurs de sélection. Les différents éléments du site apparaissent-ils en surbrillance ? Généralement, il s’agit de contours autour des boutons, des liens ou des champs de saisie. Ces indicateurs sont indispensables pour les personnes à mobilité réduite ou qui utilisent des lecteurs d’écran. Pourtant, de plus en plus de sites Web en sont dépourvus.

Vous devez comprendre à quel point les indicateurs de sélection sont importants pour votre conception universelle UX/UI. Les navigateurs ont leurs propres styles d’indicateurs de sélection par défaut qui peuvent être facilement personnalisés pour s’adapter à l’apparence de votre site.

Rédigez des textes alternatifs pertinents pour vos images 

Les lecteurs d’écran sont un facteur important à prendre en compte lorsque vous cherchez à appliquer des principes de conception universelle. Les personnes malvoyantes recourent souvent à ces dispositifs pour qu’ils leur « lisent » le Web.

En convertissant le texte en parole, les utilisateurs peuvent en réalité écouter le contenu d’un site Web. Lorsque le lecteur d’écran rencontre une image ou une photo, il la décrit à l’utilisateur. La qualité ou la pertinence de cette description varie énormément et dépend de l’effort que l’équipe de conception consacre à l’interface utilisateur.

Les lecteurs d’écran détectent les descriptions dans l’attribut <alt> de l’élément d’image ou dans le contexte ou l’environnement de l’image elle-même. Souvent, cela signifie que l’utilisateur entend seulement le mot « image ».

Parfois, les lecteurs d’écran ne font que lire le nom du fichier de l’image : une expérience utilisateur assez déroutante ! C’est ce qui arrive quand les concepteurs omettent de renseigner un texte alternatif. Par souci d’accessibilité, rédigez une description qui donne aux utilisateurs le contexte de l’image, explique ce qu’elle représente et la place qu’elle occupe dans le récit.

Si une image ne sert qu’à la décoration de votre site ou est présente à plusieurs reprises, laissez l’attribut <alt> vide pour qu’elle soit ignorée par les lecteurs d’écran. Heureusement, l’intelligence artificielle de Google pour l’ajout de légende aux images continue de s’améliorer et atteint presque 94 % de précision selon certaines normes. En attendant, continuez à fournir du texte alternatif pertinent pour vos images.

Utilisez les balises de titre adéquates pour votre contenu

Oui, la conception universelle UX/UI peut parfois se résumer à utiliser les balises de titre appropriées.

Les titres de texte définissent le style et la finalité des sites, et établissent la hiérarchie du contenu de la page. Les titres de section sont représentés par des polices plus grandes, ce qui aide les utilisateurs à mieux comprendre l’ordre du contenu.

Lorsque vous développez un site, incorporez les éléments structurels adaptés dans votre code HTML. Ils permettent aux navigateurs de traiter le contenu de manière appropriée et de mettre en place l’arborescence d’accessibilité de votre page. Les lecteurs d’écran s’appuient sur cette information pour lire et décrire votre contenu aux utilisateurs malvoyants.

Étant donné que les lecteurs d’écran tiennent compte des balises de titre pour parcourir les pages Web, ne les utilisez pas uniquement pour des raisons de style. La conception universelle implique également que votre interface et expérience utilisateur puissent être comprises de manière audible.

Ne comptez pas sur les indicateurs de survol pour révéler les liens

Comme mentionné précédemment, les indicateurs de sélection sont souvent représentés par un contour distinct autour des boutons, des liens ou des champs de saisie. Il s’agit d’une pseudo classe CSS utilisée par la plupart des navigateurs Web.

La plupart des concepteurs ne sont pas convaincus par l’indicateur de sélection par défaut, certains essaient même de le masquer. Si vous êtes dans ce cas, abstenez-vous et tâchez plutôt de trouver quelque chose de mieux. 

Vous pourriez être tenté d’utiliser l’ancien CSS d’indicateur de survol pour révéler les liens aux utilisateurs. Mais gardez toujours à l’esprit les utilisateurs nécessitant une conception plus universelle, certains d’entre eux n’ont pas forcément la chance de pouvoir utiliser une souris pour faire glisser un curseur et cliquer. Il va sans dire que les indicateurs de survol sont également incompatibles avec la navigation sur un écran tactile.

Au lieu de remplacer les indicateurs de sélection par des indicateurs de survol pour des raisons de style, placez des actions secondaires à l’intérieur des menus ou des boîtes de dialogue non modales, ou générez du contraste en faisant s’assombrir les icônes secondaires lorsque l’utilisateur en survole une ou la sélectionne avec la touche de tabulation. Quoi que vous fassiez, évitez de faire disparaître des informations utiles aux lecteurs d’écran ou à la technologie de synthèse vocale.

La conception universelle UX/UI est un objectif qui en vaut la peine. Plutôt que de l’approcher en termes de limites ou de répercussions sur vos préférences de style habituelles, songez combien ce défi peut stimuler votre créativité et rendre votre UX/UI beaucoup plus efficace, intuitive et attrayante pour un plus grand nombre d’utilisateurs.