Accessibilité rime souvent avec utilisabilité : une bonne raison de prendre en compte ces quelques règles qui facilitent la lecture pour tous les internautes.
- Définissez votre structure de titres dès le début
Assurez-vous que le contenu et le design s’inscrivent dans une structure logique et hiérarchique. - Prenez en compte l’ordre de lecture
Il doit être le même que l’ordre visuel. - Soignez le contraste
Soyez attentifs aux teintes les plus claires du gris, de l’orange et du jaune. - Utilisez du vrai texte
L’avantage du texte sur les images : il s’agrandit mieux, se charge plus rapidement et se traduit plus facilement. Si vous voulez ajouter du style à vos textes, il y a les CSS pour ça ! - Pas de CAPS !
Bannissez les textes en majuscules, évitez les italiques, je le répéterai encore et encore… - Choisissez la bonne taille de police
La taille optimale peut varier selon la police de caractère utilisée, mais 10 pt est un minimum. - Limitez la longueur des lignes de texte
Essayez de ne pas dépasser 20 mots par ligne. - Vérifiez que les liens sont identifiables
Différenciez les liens par du souligné, surtout dans le corps de texte et ne vous contentez pas de jouer sur la couleur. J’ajouterais volontiers : ne soulignez jamais du texte qui n’est pas du lien. - Utilisez des indicateurs de focus
Ceux qui se servent du clavier pour se déplacer sur une page web doivent pouvoir identifier un focus sur un lien. Choisissez de préférence la ligne pointillée. - Ajouter un lien Accéder au contenu
Toujours pour les utilisateurs de clavier, ce lien en haut de page permet de sauter le menu pour accéder au contenu principal. - Veillez à ce que l’intitulé du lien ait du sens
Évitez le classique Cliquez ici, en précisant plutôt la teneur du lien (titre d’un document, nom d’un site, intitulé d’un article)… - Utilisez avec précaution les contenus multimédias
Donnez le pouvoir à l’internaute sur la vidéo, l’audio et les animations (boutons Lecture et Pause) et évitez les boules à facettes ! - Méfiez-vous des couleurs
Certains internautes ne les perçoivent pas ou mal : la couleur seule ne doit pas porter l’information. - Soignez vos formulaires
Les contrôles de formulaire et en particulier les signalements d’erreur doivent comporter des étiquettes décrivant la nature du problème.
![L'accessibilité pour les web designers [infographie]](https://choblab.com/wp-content/uploads/2013/02/accessibilite-web-designers.png)
Pas de caps, pas d’italique ??
Bien sûr, écrire un texte de corps en toutes capitales est déconseillé car ça ralenti la lecture, mais ça n’a aucun sens de s’en priver pour des titres. Au contraires, il mettront en valeur vos titres !
Pour l’italique, je ne suis ABSOLUMENT PAS d’accords. C’est un des moyens pour que le typographe a d’introduire un contraste entre différentes parties de son texte. L’italique n’est d’abord par un superficialité. Les citations, les mots étrangers DOIVENT être en italique, c’est la règle.
Il d’autres moyens de mettre du contrase. En changeant la graisse de votre police par exemple, mais ça va rendre ces parties visibles au premier coup d’oeil : c’est parfait pour un mot clé qu’on veut vite repréré par le lecteur, mais ça n’a aucun sens de mettre en gras un mots étranger. Là, c’est l’italique qu’il faut.
Mais ça, un vrai designer le sait.
Pour les capitales, tout dépend de la longueur des titres… La mise en valeur des titres peut se faire par la taille des différents niveaux de titres et le gras. Les majuscules n’apportent rien, sinon une plus grande difficulté à lire et un sentiment d’aggression.
L’italique s’applique effectivement aux mots étrangers et aux citations dans le corps du texte (donc a priori pas de mots). Si la citation est dans un paragraphe à part de 15 lignes, ça se discute…
Un designer n’est pas censé connaître toutes les règles de typographie. Un web designer peut être très bon sur la partie « esthétique » et méconnaître certaines règles de lecture liées à l’accessibilité. L’objet de cet article est justement de sensibiliser les web designers sur la nécessité de faciliter la lecture pour tous.
Bonjour,
Je suis bien d’accord avec le point numéro 8, trop souvent je me fais avoir en passant le curseur de la souris sur du texte souligné croyant que c’est un lien. Et dans la même veine je perds souvent mon temps à passer le curseur sur des mots en gras ou dans une autre couleur pour voir si c’est un lien alors que la plupart du temps ce n’en est pas un…