Comment rendre son site web accessible à tous ?
En 2022, on comptait 60,92 millions d’internautes en France, soit 93% de la population.
Mais malgré ce nombre important, très peu de sites restent accessibles à tous. C’est pourquoi, l’accessibilité web est devenue un enjeu majeur pour les concepteurs de sites web. Cela vise à rendre un site facile d’utilisation pour les personnes en situation de handicap visuel, auditif, moteur ou mental.
L’accessibilité web devenue obligatoire depuis septembre 2020, nous allons aborder cinq bonnes pratiques simples et faciles à adopter.
Les textes alternatifs pour les images
Ajoutez des descriptions alternatives (ou alt text) aux images pour les utilisateurs malvoyants ou non-voyants. Cela permettra aux lecteurs d’écrans de lire littéralement vos images. Assurez-vous que les descriptions alternatives soient claires et précises. Par exemple, si votre photo représente un immeuble de couleur bleue, il vous faudra écrire “Immeuble bleu”.
Des couleurs contrastantes
Pour assurer la lisibilité de votre site, la couleur de votre arrière-plan doit avoir un contraste prononcé. Votre texte situé au premier plan doit ressortir plus facilement si celui-ci est important. Plusieurs outils sont disponibles sur le web afin de trouver un contraste adapté aux personnes malvoyantes ou daltoniennes (Contrast Finder, Contrast Ratio, Coolors…).
Une police lisible
En plus du choix des couleurs, celui de la police est tout autant important. Privilégiez une police sans serif (Arial, Montserrat, Gotham…). Les polices irrégulières, très serrées et ne permettant pas l’accentuation des lettres capitales sont à éviter. L’accentuation sur les lettres permet une meilleure compréhension lors du rendu audio par les synthèses vocales. De plus, une police trop petite est déconseillée. Prévoyez un minimum de 14 concernant la taille de la police.
Un site facilement navigable
Assurez-vous que le site soit navigable avec les touches du clavier (touche Maj., flèches, TAB, barre espace et Entrée). Pour les personnes ne pouvant pas utiliser de souris, c’est un moyen essentiel pour interagir et naviguer sur le site.
L’utilisation du HTML sémantique
Afin de mieux structurer votre contenu, il vous faudra organiser les différents éléments de chaque page. Mais à quoi cela correspond ? Par exemple, lors du développement de votre site, les titres sont définis par des balises <h1>, <h2>, <h3>. Vos textes seront définis par la balise <p>. Évidemment, les balises ne s’arrêtent pas seulement aux titres et textes : il y en a aussi pour des liens, des boutons (call-to-action) et plein d’autres. Les balises sémantiques permettent aux technologies d’assistance de comprendre la structure de la page. Elles permettent aussi de la lire à voix haute de manière plus compréhensible pour les utilisateurs. De plus, cela améliore également votre score de référencement (SEO), ce qui permet de générer du trafic pour votre site.
Étude de cas : le site SNCF
En 2019, la SNCF a reçu le label AcessiWeb Niveau Argent. Cela prouve leur engagement dans l’inclusion numérique. Les différentes pratiques qui leurs ont permis ce label sont :
- La typographie : elle peut être changée pour la Police Dyslexie (police de caractères spécialement développée pour les personnes dyslexiques afin de faciliter la lecture, l’apprentissage et le travail).
- L’interlignage : celui-ci peut être augmenté afin d’espacer le contenu et aider à la lecture.
- Le défilement horizontal : il peut être désactivé pour garder un seul mouvement vertical durant la navigation.
- La navigation au clavier grâce aux différentes touches (tabulation, espace et entrée) est disponible
- Les contrastes ont trois niveaux de lisibilité : par défaut, renforcés et inversés.
Source : Blog du Modérateur