Rendre Son Site Web Inclusif pour l'Accessibilité web !

Le web se démocratise de plus en plus dans le monde. Ainsi, il y a de nouveaux internautes chaque jour et de tous types. Au début de l’année 2021, on a recensé un peu moins de 5 milliards d’internautes. Nous voyons donc qu’environ 60% de la population mondiale utilise internet de nos jours. Le web est universel, c’est un de ses crédos ! Il est donc important à travers nos sites et nos contenus d’essayer d’inclure le maximum de personnes. Il est nécessaire de rendre accessible le web à n’importe qui.

Dans cet article, nous allons traiter des enjeux de l’accessibilité du web et vous montrez les étapes pour rendre votre site conforme afin de toucher le plus d’internaute possible.

Accessibilité numérique : Pourquoi optimiser son site ?

Qu’est-ce que l’accessibilité numérique ?

L’accessibilité d’un site consiste à simplifier la navigation et la compréhension de celui-ci à un plus grand nombre de personnes. Quel que soit le handicap ou la difficulté d’une personne, elle doit pouvoir avoir accès au web au même titre que les personnes dites “valides”.

Pour rendre son site accessible, il y a 4 points majeurs à respecter selon le WCAG (Web Content Accessibility Guidelines), il devra donc être :

• Perceptible : L’utilisateur doit pouvoir percevoir facilement les différentes informations et l’interface (Couleurs / Contraste / Eléments texte pour les images …)
• Utilisable : Vos pages doivent être adaptées à toute forme de navigation (clavier, souris, trackpad) tout en guidant l’internaute (Titres, Liens …)
• Compréhensible : Le contenu textuel doit être lisible et il faut assister l’utilisateur dans sa saisie (Prévention des erreurs)
• Robuste : Le contenu doit être interprété de manière fiable par une grande majorité d’utilisateurs (il doit être optimisé selon l’interface)

L'accessibilité du web : Qui est-ce que ça concerne ?

En soi, tout le monde est concerné, car le web doit être accessible pour tous. Cependant, pour les personnes en situation de handicap, permettre l'accessibilité son site prend tout son sens.

On estime que dans le monde, près de 1 milliard de personnes présentent une forme de handicap (soit 15% de la population mondiale).

Il existe une multitude de formes de handicap qui peuvent nuire à la navigation sur internet :

• Déficience visuelle
• Problèmes auditifs
• Troubles de la mobilité / de la motricité
• Troubles cognitifs
• etc.

De plus, la part des seniors (+65 ans) dans le monde est d'environ 10%. Un chiffre qui augmente chaque année. Les seniors sont aussi concernés, car ils peuvent (avec l’âge) avoir plus de difficulté à utiliser internet. Ces personnes ont souvent besoin d'aide !

Enfin, il faut savoir que l’accessibilité concerne tous les types d’appareils (ordinateur, tablette, mobile…). Il faut donc avoir une approche globale dans sa volonté d’inclusion.

Pourquoi concevoir un site accessible ?

Toucher une plus grande audience

Nous l’avons mentionné juste au-dessus, mais une partie de la population mondiale souffre d’une forme de handicap. Si nous avons donc la possibilité d’améliorer la navigation et la consultation des contenus de notre site, pourquoi ne pas le faire ? Effectivement, + mon contenu est accessible, + d’internautes je touche.

Par moralité

Certes, ce peut être du “travail” en plus de rendre conforme ses pages pour tous, mais encore une fois le web est universel. Sur internet, il n’y a pas de barrières sociales, tout le monde peut y trouver son compte. C’est pourquoi, il est aussi de notre devoir de participer à cela en incluant le maximum de personnes.

Améliorer son référencement

Lorsque vous allez mettre à jour votre site pour le rendre accessible, vous allez modifier un certain nombre de paramètres qui vont permettre aux robots Google de mieux comprendre votre site. Eh oui ! Il ne faut pas oublier que les robots d’indexation sont (en partie) aveugle et sourd.

Vous allez donc finir par donner des informations importantes (Sous-titres des vidéos, Alt texte pour les images…). Et sans vraiment vous en rendre compte, vous allez optimiser votre site pour le SEO.

En plus des informations données à Google, vous allez améliorer l’expérience utilisateur (UX) de vos pages. Cela va passer par la gestion des couleurs, contrastes, largeur des boutons, etc. Une meilleure UX pour les personnes en situation de handicap, mais aussi pour les internautes de façon globale. Un critère très important pour être bien référencé sur les moteurs de recherche.

Respecter la réglementation

L’accessibilité du web est une nécessité si votre entreprise génère un chiffre d’affaires annuel de 250 millions d’euros.

Pour connaître les modalités de conformité, le “Web Accessibility Initiative” (WAI ou w3c en français) décrit les règles, les procédures et les normes à respecter dans le WCAG 2.0.

Pour en apprendre plus, vous pouvez aussi consulter le Référentiel Général d'amélioration de l'accessibilité (RGAA).

Comment détecter les problèmes d’accessibilité de son site ?

Pour tester l’accessibilité de son site, nous avons sélectionné 3 outils qui peuvent vous aider :

Score d'accessibilité : Lighthouse

Grâce à cette extension chrome, vous pouvez analyser votre site et obtenir un score d’accessibilité. Google Lighthouse vous donne en plus de votre score, des recommandations pour améliorer vos pages.

‍

Test d'accessibilité : Experte

Le test d'accessibilité d'Experte vous permet d'avoir une vue d'ensemble du score d'accessibilité de votre domaine. Il suffit de renseigner votre nom de domaine sur la page et le site va vous sortir toutes les scores d'accessibilité de vos pages web. Les scores sont tirés de Lighthouse.

Test d'accessibilité : AChecker

Le site AChecker vous permet également de tester l’accessibilité de vos pages web. Une fois votre URL entrée, vous obtenez un rapport sur les problèmes connus et les problèmes potentiels. Ce rapport se base sur le WCAG 2.0 (Level AA).

‍

Test d'accessibilité : AccessiBe

Enfin, dans le même style que AChecker, AccessiBe offre la possibilité d’avoir une réponse sur la conformité de votre site ou non sur la législation à l’accessibilité du web.

‍

Les 3 points à respecter pour rendre son site accessible

Les outils présentés ci-dessus vont vous aider à résoudre vos différents problèmes d’accessibilité. Cependant, nous pouvons vous lister dès maintenant, sur quels leviers, il faudra agir :

Rendre son site accessible visuellement

Dans le monde, 253 millions présentent une déficience visuelle. Malgré ce chiffre impressionnant, seulement 10% des sites internet mondiaux sont accessibles pour les personnes présentant un handicap visuel.

En constatant ces chiffres, il nous semble primordial pour rendre son site accessible de l’optimiser visuellement. Pour réaliser cela, vous pouvez :

• Faire attention aux contrastes : les utilisateurs doivent pouvoir lire clairement chaque contenu et texte (Vous pouvez checker la lisibilité avec les contrastes grâce à cet outil : https://contrastchecker.com/)
• Modifier votre type de police : Certaines polices sont difficiles à lire
• Modifier la taille de votre police : Un texte un peu plus grand permettra une meilleure lisibilité
• Rendre possible le zoom sur vos pages : Certains éléments de vos pages peuvent être trop petits
• Mettre des “Alt Texte” à vos images : Cela permet de décrire précisément votre image grâce à un court texte

Si vous voulez aller plus loin dans cette démarche, vous pouvez utiliser l’extension ChromeLens. Une fois l’extension installée, il vous suffit de vous rendre sur une page web, faire un clic droit, inspecter la page et vous rendre dans l’onglet ChromeLens. Vous avez maintenant la possibilité de simuler les handicaps visuels sur vos pages pour voir le rendu. Un test d’accessibilité est aussi disponible.

‍

Rendre son site accessible de façon audible

Dans le monde, un peu moins de 500 millions de personnes présentent une déficience auditive handicapante. Un point sur lequel il faut aussi être vigilant pour son site.

Pour inclure les personnes malentendantes, vous pouvez :

• Mettre des sous-titres à vos vidéos / audios
• Transcrire les fichiers média avec du texte
• Faire attention à la retranscription de la synthèse vocale (Il faut auparavant paramétrer la langue)

L'accessibilité au niveau de la navigation

Pour ce point, nous prenons en compte les personnes présentant un handicap moteur ou cognitif. En effet, la navigation sur certains sites peut être un vrai casse-tête et exclure des internautes. Pour cela, nous vous avons listé quelques points pour lesquels il faut être vigilant :

• Avoir une hiérarchie des Titres (pour la compréhension du contenu)
• Mettre des titres aux liens
• Mettre des titres explicites aux différents champs d’un formulaire
• Mettre en place un “Fil d’Ariane” (pour visualiser le chemin)
• Agrandir les différents types de boutons / liens cliquables
• Avoir des animations “simples” (pas d’animations psychédéliques)
• Avoir un design et des contenus “simples” et facilement compréhensifs
• Modifier taille souris et sa couleur au besoin
• Permettre la navigation au clavier ou autre (trackpad)
• Vérifier l’accessibilité sur tous les types de support

Pour réaliser toutes ces opérations, il vous faudra sûrement modifier votre code. Mais heureusement, nous avons une solution plus simples pour vous grâce à Webflow. Avec ce logiciel, vous pourrez créer un site accessible pour les personnes handicapées.

Améliorer l'accessibilité web de votre site facilement grâce à Webflow ?

Webflow est pleinement conscient des problèmes qui accompagnent la création de sites web accessibles. Les fonctions "no-code" telles que la vérification et les paramètres directement dans votre CSS permettent de s'assurer beaucoup plus facilement que vous avez accompli vos tâches en matière d'accessibilité. Cependant, certaines options ne sont encore disponibles qu'en utilisant du low-code, comme l'ajout d'éléments interactifs par exemple sur les interaction type “accordion”. Mais on a de la chance car... Webflow, dans sa stratégie 100% no-code offres aux utilisateurs des lignes de codes html facilement intégrable à vos sites qui vous aideront à réaliser vos projets 100% accessibles !

Contrast ratio text - Accessibilité visuelle

Le choix d'une couleur de contraste entre votre fond et votre texte est un outil déterminant pour un projet afin de s'assurer que tout le contenu de celui-ci est facilement accessible. L’outil natif d’audit de Webflow vous permet de savoir si votre texte respecte les bonnes normes d'accessibilité. Et oui, Webflow sait combien il est important de s'assurer que votre site web soit conforme aux normes WCAG afin de garantir que les personnes ayant des difficultés à voir l'écran puissent profiter de votre site web de la même manière que tout le monde.

Découvrir la fonctionnalité dans ce tutoriel 👇

Prévisualisation des différentes invalidité de visions - Accessibilité visuelle

Grâce à l'outil de prévisualisation inclus dans le designer de Webflow, vous avez la possibilité de mettre votre site web en conditions de tous les différents points de vue que peut générer une déficience visuelle comme la daltonie.

Suivre les étapes suivantes :

Audit de balise alt text - Accessibilité visuelle

L’audit natif de Webflow vous affiche un message d'erreur lorsque vous avez oublié d'ajouter l'attribut ALT.

La meilleure pratique consiste à remplir les attributs alt de vos images directement dans votre médiathèque et à utiliser la fonction "Utiliser le texte alt de la ressource". Cela vous permet d'appliquer automatiquement la balise alt chaque fois que vous réutilisez ce visuel.

(Vidéo youtube à venir 🎥 )

<A> Attribut personnalisable en 2 clics - Accessibilité auditive

La façon dont un élément est annoncé par un lecteur d'écran est généralement déterminée par son contenu. L’ajout des balises aria-label permet d’améliorer la compréhension de votre site par les screen readers. Webflow vous permet de personnaliser facilement les attributs <a> pour améliorer l'accessibilité de votre site web.

Suivre les étapes suivantes :

Project settings → custom attributes → + → Add Attribute

S’assurer d’avoir des liens avec une cible de minimum 44px -Accessibilité numérique

Il est essentiel d'avoir une taille cible minimale de 44px sur votre lien afin qu'il puisse être facilement cliqué, même si vous souffrez d'une maladie telle que la maladie de Parkinson.

Accessibilité numérique : Allez plus loin en suivant la Webflow Accessibility Check List

Cette ressource est absolument fantastique : Webflow Accessibilty Check List

Webflow a mis gratuitement à disposition de tous, une checklist reprenant chaque point avec des recommandations d’implantation (dont certaines en low-code) mais avec des tutoriels simples à suivre, et bien sûr, le code à copier/coller tout simplement.

En plus cette checklist et partageable dans vos équipes, avec une barre d’évolution des tâches qui vous permet de mesurer votre avancé en groupe !