Comment améliorer votre site afin qu’il soit accessible pour tous ?


Aujourd’hui, on va parler design d’accessibilité. Qu’est-ce que cela signifie ? Cela veut dire que sur le numérique aussi il faut penser design pour tous ! Pour tous, cela veut dire aussi pour les personnes sourdes, pour les malvoyants, les dyslexiques, les handicapés moteurs ou physiques, etc, pour tous quoi !

Je ne vais pas entrer dans tous les détails concernant l’accessibilité, mais je vais essayer de vous donner quelques bonnes pratiques que vous pouvez mettre en place d’ors et déjà, de façon simple et rapide.


Si vous voulez en savoir plus sur ce sujet, vous pouvez aller consulter la liste de critères d’accessibilité que vous pouvez trouver dans les directives WCAG 2.1 (en anglais, elle n’a pas encore été traduite en français). Et pour ceux qui ne sont vraiment pas à l’aise en anglais, vous pouvez consulter la version 2.0 (précédente) qui elle est traduite en français. Ces directives sont un référentiel, en France celui à suivre est le RGAA. De plus, il comprend plusieurs niveau : les critères de niveau AA sont ceux qui sont viser le plus souvent.

Si vous avez des questions, n’hésitez pas à me les poser à la fin de l’article en commentaires ! Vous êtes prêt ? ✍️


Vous n’y pensez peut-être pas, mais certains de vos utilisateurs peuvent être en situations de handicaps et ils veulent aussi vivre une bonne expérience d’utilisation avec vous !

➡️ Le but de cet article est vraiment de vous fournir quelques bonnes pratiques à mettre en place sur votre site en fonction des différents types d’ “handicaps” que peuvent avoir vos utilisateurs :

👉 Malvoyants
👉 Malentendants
👉 Dyslexique
👉 handicapés moteurs

🔼Aujourd’hui, certains de ces utilisateurs consultent probablement vos sites et peuvent rencontrer des difficultés à s’en servir, si vous ne faites pas le nécessaire pour les accompagner dans leur expérience d’utilisation.

Les exemples que je vous donne aujourd’hui, sont les plus simple à appliquer, alors pas d’excuses, vous pouvez tous le faire !

➡️ Design pour malvoyants (1/2)

Lorsqu’on parle de design pour les malvoyants, c’est au sens large du terme. Cela concerne autant les personnes ayant une mauvaise vision (myopie, presbytie, etc) mais aussi les personnes souffrant de daltonisme. Il faut garder en tête que même en portant des lunettes, certaines personnes peuvent quand même avoir des troubles légers très importants de la vision.

Alors pour les aider tout va se jouer dans les couleurs que vous utilisez.

1. Utilisez des couleurs contrastées

Afin d’améliorer la lisibilité pour les personnes malvoyantes, il est recommandé d’utiliser des couleurs très contrastées entre elle.

1. Renseigner correctement vos informations

Les personnes daltoniennes par exemple, ne verront pas forcément la bonne couleur de votre produit (si c’est un vêtement par exemple). Pensez donc à le préciser dans le titre de l’article, dans la description et de bien renseigner vos labels avec le nom de la couleur correspondante. C’est encore plus important si votre produit existe en plusieurs coloris par exemple, sur chaque “rond” de couleur indiqué en dessous le nom de la couleur correspondante.

2. Une fonction de zoom

Vous devez permettre à vos utilisateurs de pouvoir zoomer sur les contenus textuels de votre site pour améliorer le confort de lecture. 

3. Accessibilité de l’information

Afin de faciliter la navigation sur votre site à des personnes malvoyantes, essayez de centraliser au maximum toutes les informations liées à un même sujet sur une même page, de façon visible directement. Par exemple, évitez aussi d’enfouir certaines informations dans des documents à télécharger, plus difficile d’accès.

4. Cohérence graphique

Préférez l’utilisation de combinaisons de couleurs et de polices identiques dans tous vos call-to-action.

➡️ Design pour malvoyants (2/2)

Lorsqu’on parle de design pour les malvoyants, on doit aussi penser aux utilisateurs les plus malvoyants, aveugles. Dans ce cas, ce sont des logiciels de “screen readers” qui se chargent de lire votre site à voix haute pour ces utilisateurs. Ces logiciels de lecture automatique, décryptent votre site. Pour que le texte lu ait une certaine cohérence, il y a des éléments clés à remplir et des codes de conception à respecter.

1. L’importance des balises <alt>

On entend souvent parler de ces balises <alt> qu’il faut remplir pour chacune de nos images pour faciliter notre bon référencement naturel. Mais saviez-vous que ces balises <alt> sont aussi lu par les logiciels de “screen readers” à vos utilisateurs. Il est donc important de décrire l’ensemble de vos images et vidéos dans ces balises <alt> et de fournir à l’ensemble de vos contenus médias des sous titres descriptifs. 

2. Une disposition logique et linéaire 

Pour permettre au logiciel de repérer et de décrire le contenu de manière linéaire, il est recommandé de hiérarchiser et aérer les différentes informations et autres composants de votre site.

3. Penser “Clavier” 

Il est nécessaire de construire votre site pour un usage et une navigation sur un clavier. 

4. Les intitulés générique sont à bannir

Tous les liens et les intitulés de vos boutons d’actions doivent impérativement définir l’action et la destination qu’ils engendrent. 

➡️ Design pour malentendants

1. Donner des chapitres à votre site

Il est important d’écrire vos mots en entier, sans utilisation de raccourcis ou d’iconographies implicites trop difficiles de compréhensions.

2. Les contenus vidéos

Pour permettre à l’internaute de comprendre le contenu de vos vidéos, penser à y intégrer des sous-titres.

3. La linéarité des contenus 

Proposer une disposition logique et continu de vos éléments pour faciliter la compréhension et la lecture de vos pages. Vous devez penser vos pages avec différents “blocs” afin de différencier chaque zones de vos pages.

➡️ Design pour dyslexiques

1. 1 images vaut 1000 mots 

Afin de rendre l’expérience sur le site plus mémorable et agréable, il est important de solliciter l’internaute par une grande diversité de typologie de médias : vidéos, photos, bandes audios, etc. C’est quelque chose que je répète souvent, mais qui vaut encore plus pour faciliter la lecture d’un contenu à des personnes dyslexiques. Ils comprendront plus rapidement et facilement un article illustrée par des graphiques, des illustrations, une infographie ou imagée par des photos. 

2. Alignement des textes 

Pour ne pas perturber l’internaute dans sa lecture, le texte doit être de préférence ferré à gauche. Ne justifiez pas vos textes ! De plus, la police de texte utilisée doit être cohérente pour faciliter la lecture : même taille de police pour les H1, H2, H3, corps de texte, même interlignage partout, etc.

3. Limiter les éléments textuels

Les phrases à rallonges et les longs paragraphes textuels ne seront pas lus et sembleront trop confusant à la lecture. Il est préférable de présenter les informations clefs sous forme de bullets points, hiérarchisées et des phrases courtes. Faites des courtes introductions et des conclusions.

4. Un design sur mesure

Pour un meilleur confort de navigation, il est important de permettre à l’internaute de modifier facilement le contraste entre le fond d’écran d’un site internet et le texte : modes jour/nuit.

➡️ Design pour les personnes en situation de handicap moteurs

1. Des sections cliquables plus imposantes

Afin de faciliter l’action du clic, faites en sorte d’élargir la zone de clic, au delà de la simple taille du bouton. Il faut que l’ensemble de la zone comprenant le bouton soit cliquable.

2. Un nombre succinct d’animations

Pour ne pas perturber la navigation, l’utilisation d’animations interactives doit être réduit à son maximum. L’animation doit concerner l’action immédiate de l’internaute seulement ou la gestion de l’attente.


Lire aussi : Les habitudes de vos utilisateurs créent des standards ou l’inverse



☝️ Avez-vous des questions  ?

Maintenant à vous de faire en sorte de rendre votre site le plus accessible possible pour tous ! 🙌

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *