Accessibilité web : normes et test

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 ?

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) représentent un ensemble de directives essentielles pour améliorer l'accessibilité web des sites internet. Ces recommandations, émises par le W3C (World Wide Web Consortium), font partie des standards du web mondial et visent à garantir que les contenus en ligne soient accessibles à tous, y compris aux personnes en situation de handicap. En suivant ces normes, les développeurs et les concepteurs peuvent s'assurer que leurs sites web respectent les meilleures pratiques en matière d'accessibilité numérique, rendant ainsi le web plus inclusif pour tous les utilisateurs.

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 législation impose aux entreprises publiques ainsi qu'aux entreprises privées générant plus de 250 millions d'euros de chiffre d'affaires de rendre leurs contenus en ligne accessibles. Toutefois, au-delà de cette obligation légale, l'accessibilité web devrait être considérée comme un impératif citoyen.

Optimiser l'accessibilité d'un site web offre plusieurs avantages majeurs :

• Renforcer l'image de marque : Un site web accessible reflète une entreprise soucieuse de tous ses utilisateurs. Une étude a révélé que 92 % des utilisateurs sont plus enclins à acheter sur un site accessible.
• Élargir son audience : En améliorant l'accessibilité de son site, une entreprise peut toucher un public plus large, notamment les personnes en situation de handicap, qui représentent 20 % de la population et sont nombreuses à faire leurs achats en ligne.
• Améliorer le référencement naturel : Coder un site en respectant les critères des WCAG (ou du RGAA en France) contribue à améliorer son SEO (référencement naturel). L'accessibilité web fait partie des règles fondamentales pour optimiser la visibilité d'un site sur les moteurs de recherche.

Les autres pathologies à considérer

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

Des conditions comme la myopie, la dyslexie ou encore l'arthrose ne sont pas considérées comme des handicaps lourds, mais elles peuvent néanmoins compliquer la navigation en ligne pour les personnes qui en souffrent.

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

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

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.

• Attribuer des balises alt pour les images

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 inclusive, qui forme au métier de développeur·se en 21 mois. Elle a trois campus : Paris, Nantes et Lyon. Au sein de l'école, les apprenant·e·s apprennent en faisant grâce à une pédagogie alternative inspirée de Montessori, approchant le code comme une langue vivante et favorisant la collaboration et l’entraide grâce à des projets collectifs. L’école doit son nom à Ada Lovelace, qui fut la première programmeuse de l’histoire.

Après neuf mois de formation, les apprenant·es sont opérationnel·le·s et prêt·e·s à réaliser leur apprentissage - rémunéré - pendant douze mois dans une des entreprises partenaires de l’école (Trainline, Deezer, Blablacar, JellySmack, Back Market...).

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. Pour plus d’informations sur la formation, télécharge notre brochure de présentation.