L'Accessibilité Web : Comment la mettre en place ?

Tech févr. 23, 2021

Manon Ranvier, spécialiste de l'accessibilité Web chez Contentsquare est venue animer un webinar sur ce thème, pour nous expliquer concrètement :

  • Combien de personnes dans le monde souffrent d'un handicap pouvant affecter leur navigation sur le web
  • Ce qu'est précisément l'accessibilité Web
  • Les normes d'accessibilité existant sur Internet
  • Les avantages à rendre un site accessible pour une entreprise

Pour voir et revoir la conférence de Marion, tu peux te rendre sur notre chaîne Youtube en cliquant sur le lien ci-dessous ⬇️

Les sous-titres peuvent être activés sur cette vidéo.

Le contexte : qui est concerné par l'accessibilité ?

Savais-tu qu’il y avait environ 1 milliard de personnes souffrant d’un handicap de forme physique, visuelle ou auditive pouvant affecter leur navigation sur le web ?

Cette illustration montre les différents handicaps qui peuvent impacter la navigation sur le Web.

On recense dans le monde :

  • 285 millions de personnes malvoyantes
  • 300 millions de personnes atteintes de daltonisme
  • 700 millions de personnes atteintes de dyslexie

En plus de cela, environ 600 millions de personnes dans le monde ont plus de 65 ans et peuvent avoir des difficultés à naviguer sur le Web à cause de leur âge.

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

"C’est l’habilité d’un site Web, d’une application mobile ou d’un document électronique à être facilement navigable et compréhensible par le plus grand nombre de personnes, incluant celles en situation de handicap (visuel, auditif, moteur, cognitif)"

Un site accessible permet aux personnes en situation de handicap d'interagir via des technologies d'assistance comme Jaws ou NVDA, qui permettent une synthèse vocale du contenu en ligne. Mais si un site ne répond pas aux critères d'accessibilité, ces technologies d'assistance vont avoir du mal à lire le contenu proposé en ligne.

Les 4 grands principes de l'accessibilité

Les WCAG 2.1 (Web Content Accessibility Guidelines) constituent un ensemble de recommandations destinées à améliorer l’accessibilité des sites web. Ces réglementations font partie de celles du W3C qui définit le standard du web pour tous.

Ces recommandations s'articulent autour de 4 grands principes et 12 lignes directrices :

1. Être perceptible

  • Par exemple, un contenu non-textuel doit être accompagné de son équivalent textuel selon les besoins de l'utilisateur : grands caractères, braille, synthèse vocale, symboles ou langage simplifié.
  • Il est également important de créer une solution de remplacement aux médias temporel (audio ou vidéo). Cela peut se faire par de la transcription textuelle, un système de sous-titrage automatique et/ou la transcription en langue des signes
  • Le contenu doit être adaptable, c'est à dire pouvoir se présenter de différentes manières sans perte de structure ou d'informations (par exemple avec un mise en page simplifiée)
  • Il doit également être distinguable, de part les couleurs, contrastes, le son réglable ou la distinction entre le premier plan et l'arrière plan.

2. Être utilisable

  • Toutes les fonctionnalités doivent être accessibles à partir du clavier grâce à la tabulation.
  • L'utilisateur doit avoir suffisamment de temps pour lire et utiliser le contenu (éviter le défilement automatique, et les images trop rapides dans une vidéo)
  • Il ne faut pas mettre en ligne du contenu susceptible de provoquer des crises (rapidité de passage, clignotement de bannières)
  • Il faut aider l'utilisateur en lui fournissant des éléments d'orientation pour naviguer sur le site et s'y retrouver (plan du site, titre, liens) pour éviter de perdre sa navigation et sa souris

3. Être compréhensible

  • Le contenu doit être lisible et compréhensible de tous. Les abréviations et le jargon doivent être accompagnés d'explications et la langue doit être précisée, en particulier pour les personnes dyslexiques et autistes.
  • Les pages doivent fonctionner de manière prévisible
  • L'utilisateur doit être guidé afin d'éviter au maximum les erreurs de saisie (correction, pré-remplissage dans les formulaires, aide contextuelle...)

4. Être robuste  :

  • Le contenu doit pouvoir être interprété de manière fiable par un grand nombre d'agents utilisateurs. C'est à dire que la compatibilité entre les agents utilisateurs et les technologies d'assistances (comme Jaws et NVDA mentionnées au-dessus) doit être optimisée.

Ces mesures sont cohérentes avec la norme française : le RG2A qui s'organise en 13 thématiques.

Aujourd'hui encore, 70% des contenus digitaux ne sont pas accessibles

Ce chiffre, d'autant plus en considérant le contexte  actuel, parait inacceptable. Avec la crise sanitaire du Covid-19, le Web devient l'un des principaux canal de communication. Or, on omet 20% de la population mondiale qui se trouve être en difficulté pour naviguer.

Pourquoi être accessible ?

En France, la réglementation oblige les entreprises du secteur public et les entreprises du secteur privée qui génèrent plus de 250 millions d'euros de chiffre d'affaires, à rendre leurs contenus en ligne accessible. Cependant, au delà de la réglementation, il est important que l'accessibilité devienne un impératif de citoyenneté.

Optimiser l'accessibilité d'un site permet notamment :

  • D'améliorer son image de marque : un site accessible, c'est un site d'une entreprise qui se soucie de tous ses utilisateurs. Une étude montre que 92% des utilisateurs sont plus enclin à acheter sur un site accessible.
  • Améliorer l'accessibilité de son site permet également d'élargir son audience. Les personnes atteinte d'un handicap (20% de la population) sont nombreux à faire leurs achats sur internet.
  • Coder un site accessible en fonction des critères du WCAG (ou du RGAA en France) va considérablement améliorer son référencement naturel. Cela fait partie des règles de bases du SEO.

Les autres pathologies

Un site codé de manière accessible ne prend malheureusement pas en compte toutes les pathologies.

La myopie, la dyslexie ou encore l'arthrose ne sont pas considéré comme des handicaps lourds, mais empêchent  quand même les personnes qui en souffrent d'avoir une navigation simple.

Sur ce lien, vous aurez un aperçu de ce que voit une personne atteinte de dyslexie lorsqu'elle lit un texte.

Ici, vous apercevez la vision d'une personne atteinte de dégénérescence maculaire.

Quelles solutions concrètes ?

Des initiatives comme ContentSquare ont décidé de remédier aux questions d'accessibilité  en proposant une solution de plug-in : un petit programme capable de s'intégrer dans un navigateur pour en étendre les capacités, ici rendre les sites accessibles.

En effet, on se rend compte que même l'aspect réglementaire ne pousse pas les entreprises à rendre leur contenu en ligne accessible. On rappelle que 70% des contenus digitaux ne sont toujours pas accessible aujourd'hui.

Le plug-in ContentSquare s'installe sur n'importe quel site via une ligne de script. Il apparait via un icône en forme de loupe. Ce plug-in va profiter à l'utilisateur final qui va ainsi pouvoir paramétrer son confort de lecture en ligne.

Plusieurs fonctionnalités sont disponibles grâce à ce plug-in :

  • Changer la police
  • Modifier la taille de la police
  • Modifier le contraste du site
  • Modifier la luminosité du site
  • Modifier la couleur et la taille de la souris
  • Possibilité de lecture audio grâce à une synthèse vocal

L'installation de ce plug-in par les entreprises n'est en revanche que la première étape vers un long travail qui mène à la mise en conformité totale de leur site internet.

Contentsquare a également créé une fondation afin de sensibiliser les entreprises, les écoles, mais aussi le grand public au sujet de l'accessibilité numérique.

8 conseils pour optimiser l'accessibilité de ton site

  • Assurer la naviguation complète de son site via un clavier

Les utilisateurs présentant des troubles de la motricité et de la vision vont souvent avoir besoin de naviguer sur un site à 100% via le clavier.

  • Faire attention aux couleurs
Ici, on aperçoit la façon dont voient les personnes atteintes de daltonisme (il existe 3 formes de daltonisme)

Les couleurs permettent aux utilisateurs de distinguer convenablement les ensemble d'information. Les personnes atteinte de daltonisme peuvent avoir du mal à distinguer ces différentes informations si le site n'est pas prévu à cet effet. Il existe une extension "ColorBlinding" qui permet de voir les couleurs de la même manière qu'une personne atteinte de daltonisme et ainsi  vérifier les contrastes de son site.

  • Utiliser des titres descriptifs pour les liens

Mettre des titres descriptifs pour les liens permet aux personnes utilisant des lecteurs d'écran de comprendre l'objectif du lien ainsi que sa destination.

  • Structurer et organiser son site avec des titres et en-têtes

En plus d'améliorer le SEO de ton site, les en-têtes permettent une navigation plus simple sur un site.

Cette action permet de fournir une description vocale aux images en passant par un lecteur d'écran. Cela permet également d'améliorer le référencement naturel du site

  • Labeliser les champs de ses formulaires

Donner un titre aux différents champs de vos formulaires permet aux lecteurs d'écran d'aider l'utilisateur à remplir correctement le formulaire

  • Fournir une alternative textuelle à chaque contenu non-textuel

Il est important d'intégrer des sous-titres aux vidéos et des descriptions textuels pour les images.

  • Vérifier l'accessibilité de son site

Il existe des tests d'accessibilité qui permettent de vérifier et de détecter les éléments qui pourraient rendre difficile la navigation de personnes atteintes d'un handicap.

Ada Tech School est une école d'informatique ouverte à toutes et à tous, qui veut construire une tech accessible à toutes et à tous.

C'est pourquoi les développeur·se·s formés chez Ada Tech School ou ailleurs doivent être au courant de ces règles, pour pouvoir changer la donne au sein de leurs expériences professionnelles.

A propos d’Ada Tech School

Ada Tech School est une école d’informatique d’un nouveau genre. Elle s’appuie sur une pédagogie alternative, approchant le code comme une langue vivante, ainsi que sur un environnement féministe et bienveillant. Elle doit son nom à Ada Lovelace qui fut la première programmeuse de l’histoire.

L’école est située à Paris et accueille chaque promotion pour deux ans. Après neuf mois de formation, les étudiants sont opérationnels et prêts à réaliser leur apprentissage - rémunéré - pendant douze mois dans une des entreprises partenaires de l’école comme Trainline, Deezer, Blablacar ou encore Botify. Aucun pré-requis technique n’est exigé pour candidater. Il suffit d’avoir plus de 18 ans. La sélection se fait en deux temps : formulaire de candidature puis entretien avec une réponse sous 2 semaines.

Super ! Vous vous êtes inscrit avec succès.
Super ! Effectuez le paiement pour obtenir l'accès complet.
Bon retour parmi nous ! Vous vous êtes connecté avec succès.
Parfait ! Votre compte est entièrement activé, vous avez désormais accès à tout le contenu.