Les 5 conseils de conception, pour un site plus accessible !

Un plateau avec cafetière en piston, thé , sucre et tasse, accompagnée d'une cafetière blanche à coté

Parlons peu, mais parlons bien. Aujourd’hui, que nous soyons concepteur.trices d’interfaces ou non, il existe des outils pour nous permettre de rendre nos sites plus accessibles. Voici quelques pratiques qui vous seront très certainement utiles par la suite ! 

1 – Structurer l’information

La phase de conception passe par une organisation cohérente et compréhensible de l’information. Bien structurer votre site revient à bien ranger votre bureau. 

  • Mettre une hiérarchie claire (Titre, sous-titre, paragraphes)
  • Regrouper les informations similaires
  • Laisser respirer (laisser de l’espace entre les différents groupes d’éléments)

Les sources : Use headings and spacing to group related content – w3.org

2 – La couleur oui, mais pas seule

Utiliser la couleur pour faire passer une information n’est pas une mauvaise solution en soi, mais il faut bien garder à l’esprit qu’il ne faut pas l’utiliser seule. 

Les sources : Don’t use color alone to convey information – w3.org

3 – Faire contraste

Pour une meilleur visibilité il est nécessaire d’avoir une attention particulière sur les contrastes utilisés entre les différents éléments de la page et leurs fonds. 

Pour un bon contraste un ratio de 4.5:1. Autrement dit, votre texte (ou votre titre, images, icônes etc.) doit être clairement visible par rapport à son fond.

Les sources : Provide sufficient contrast between foreground and background – w3.org

4 – Restons focus

Pour pouvoir naviguer certaines personnes n’utilisent pas la souris (mais le clavier ou la voix). Pour leur permettre de naviguer correctement, il est important pour un concepteur ou une conceptrice d’interfaces web de rendre visible ce que l’on appelle le “focus”. Il s’agit d’un état où la personne est sur le lien voulu mais n’a pas encore cliqué sur ce lien.  

Les sources : Ensure that interactive elements are easy to identify – w3.org

5 – Vigilance sur les formulaires

Il est toujours ardu de réaliser un formulaire clair et accessible. Mais pas impossible. Un formulaire ce n’est pas uniquement un bloc composé de champs. C’est un lien direct avec l’utilisateur, peut-être davantage que le reste du contenu. 

  • Un champ doit avoir un titre et un label
  • Un champ sélectionné doit être clairement visible.
  • Une erreur doit être clairement énoncée pour chaque champ (l’erreur doit être claire et compréhensible)
  • Une action (envoi de formulaire) doit avoir un retour (autrement dit un “feedback”), pour lui permettre de comprendre que l’action a été réalisée sans encombres.

Les sources : 

Ensure that form elements include clearly associated labels – w3.og

Provide easily identifiable feedback – w3.org

Autres ressources : 

7 choses que tout designer doit savoir sur l’accessibilité – Lexane – Medium France (traduction de l’article de Jesse Hausler)

7 Things Every Designer Needs to Know about Accessibility – Jesse Hausler – Salesforces UX

Accessibility guidelines for UX Designers – Avinash Kaur – UX Collective

5 Easy Ways to Make Your UI More Accessible – Cathryn Rowe – UX Planet

Ces articles peuvent vous intéresser :

Laisser un commentaire

L'équipe

Hélène Heurtaux

Hélène Heurtaux

Intégratrice web

6 années en agences en tant qu’intégratrice, biberonnée à la qualité web et à l’importance de l’accessibilité pour tous, elle accompagne aujourd’hui les entrepreneur·e·s qui ont besoin de visibilité sur le web. Sa sensibilité technique, design et éditoriale lui permettent d’avoir une vision globale sur la refonte d’un site web. Curieuse et idéaliste, elle aime découvrir et faire rayonner les projets qui ont du sens.

Amandine Biou

Amandine Biou

UI/UX Designer

Diplômée d’un master Conception et Intégration Multimédia de l’Institut de la Communication de Lyon, elle se lance en freelance en 2018 et créer le studio Bamiu. Son cœur d’activité concerne la création d’interface utilisateurs, mais avant de faire du beau, elle cherche du sens en étudiant et en analysant les réels besoins utilisateurs. Son ambition secrète ? Rendre la vie des gens qu’elle rencontre plus simple ! Parmi ses outils de prédilections figurent les post-it, mais aussi la suite Adobe, Figma et Zeplin. Sa force au sein du collectif ? Sa détermination et sa bonne humeur.

Jonathan Gladine

Jonathan Gladine

Designer produit

Navigue, depuis 6 ans, dans les diverses composantes du design et accompagne les entreprises dans la définition de leur identité de marque (identité visuelle et design produit). Il place l’accompagnement et le conseil au centre de ses priorités pour concevoir des projets porteurs de sens. Son credo ? Améliorer la vie du plus grand nombre. Parmi des outils favoris figurent : Wordpress, 3Ds Max, Rhino 3D et la suite Adobe. Pragmatisme,patience et diplomatie sont ses forces dans le collectif.