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


Que signifie design d’accessibilité ? 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 du design d’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 le design d’accessibilité, 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 sur le design d’accessibilité, 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 doivent aussi vivre une bonne expérience sur votre site !

➡️ 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.

Voilà quelques conseils de design d’accessibilité que je vous invite à appliquer le plus possible sur vos sites !

Photo d'un oeil avec titre "Avoir un site accessible pour tous"
Avoir un site accessible pour tous @Tips_ux_ui

➡️ Design d’accessibilité pour malvoyants (1/2)

Cette partie concerne autant les personnes ayant des problèmes de vue (myopie, presbytie, daltonisme, etc). 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.

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

1. Utilisez des couleurs contrastées

Il est recommandé d’utiliser des couleurs très contrastées entre elle : fond/forme, afin d’améliorer la lisibilité pour les personnes malvoyantes.

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 d’accessibilité pour aveugles

Dans ce cas de figure, 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 d’accessibilité 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 d’accessibilité pour dyslexiques

1. 1 images vaut 1000 mots 

C’est important de solliciter l’internaute par une grande diversité de typologie de médias : vidéos, photos, bandes audios, etc, afin de rendre son expérience sur votre site plus mémorable et agréable. 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 d’accessibilité pour les personnes en situation de handicap physiques/moteurs

1. Des sections cliquables plus imposantes

Pour 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 penser design d’accessibilité et de rendre votre site le plus agréable pour tous ! 🙌

Laisser un commentaire

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