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
