Bonjour à toi et bienvenue dans ce nouvel article Eid Lab ! Nous allons parler accessibilité !
Accroche-toi, il y a beaucoup de choses à savoir. Mais, ne t’en fais pas, ce ne sera pas aussi difficile que ce que tu crois.
C’est parti !
Pour commencer, regardons quelques chiffres :
En France, seulement 30 % du contenu sur le web est accessible aux personnes atteintes de handicap.
En 2021, 30 % des sites de services publics, 20 % des sites d’actualités et 44 % des sites e-commerce, seulement, étaient accessibles aux personnes atteintes de handicaps cognitifs, visuels ou physiques.
Comment expliquer ces chiffres si bas pour des sites si cruciaux ? Nous sommes tous égaux devant les démarches administratives, nous y sommes tous contraints.
Pourquoi cela devrait-il être plus difficile lorsque l’on est atteint de handicap ?
Pour les sites e-commerce, même chanson. Pourquoi ne pas rendre ton site e-commerce accessible aux personnes atteintes de handicaps ? N’ont-elles pas le droit de bénéficier de tes produits ?
Pour l’inclusivité de tous et pour ton business, on te donne les informations nécessaires pour améliorer l’accessibilité de ton site web !
Qu’est-ce que l’accessibilité ?
Rendre ton site accessible c’est comme si tu avais une boulangerie en centre-ville avec des marches. Pour que les personnes en fauteuil roulant et les personnes âgées puissent atteindre ta boulangerie, il te faut installer une rampe d’accès. Et bien là, c’est pareil.
Concrètement, l’accessibilité des sites consiste à rendre les services publics en ligne accessibles aux personnes handicapées.
Afin que tout le monde puisse accéder à ton site web, il faut appliquer quelques règles techniques. Certaines sont basiques et elles peuvent être réalisées seul.
D’autres règles sont plus pointues et requièrent un peu de connaissances techniques ou l’aide d’un professionnel.
Commençons par établir le profil des personnes ayant le plus besoin des normes d’accessibilité.
L’accessibilité, qui ça concerne ?
En vérité, les normes d’accessibilité concernent un peu tout le monde. Car, pour les voyants, cela améliore l’expérience visuelle et la cohérence de navigation proposée par ton site. Mais, il faut bien garder en tête que tous les handicaps peuvent être concernés par ces normes.
Si tu mets en pratique plusieurs de ces standards, tu améliores également ton expérience utilisateur et donc ton SEO.
C’est parti ? Voici donc les principaux profils ayant besoin de plus d’accessibilité pour un quotidien facilité.
Les malvoyants : Ici nous avons deux catégories de malvoyants.
Ceux pour qui la maladie n’est pas incapacitante comme les daltoniens, il n’est pas nécessaire d’utiliser des outils supplémentaires pour naviguer sur internet, mais ils rencontrent tout de même des difficultés quant aux signaux colorés. De manière générale, la couleur rouge = à une urgence, attention cela ne fonctionne pas avec des malvoyants. Il est donc préférable d’ajouter un message à caractère urgent — en majuscule par exemple.
Pour les personnes malvoyantes dont la maladie est incapacitante, des outils supplémentaires — comme des lecteurs d’écran et des raccourcis clavier — sont nécessaires pour une bonne navigation.
Le langage HTML possède nativement des informations à destination d’un lecteur d’écran.
Veille à garder ton langage HTML clair et cohérent avec des balises adaptées au contenu — un bouton est un bouton, un encart doit être déterminé comme tel, etc..
Les malentendants :
Pour les personnes ayant des problèmes de surdité, il est préférable de ne pas trop utiliser d’interactions sonores ou de les combiner avec des push visuels — comme des notifications ou des messages pop-up.
Les normes et standards d’accessibilité
Maintenant que nous avons mieux ciblé notre persona, nous allons étudier les règles, normes et standards de l’accessibilité. Pour comprendre tout ça, nous allons commencer par te présenter les organismes qui déterminent ces normes et ces standards d’accessibilité du web.
Le RGAA
La direction interministérielle du numérique (DINUM) édite régulièrement le référentiel général d’accessibilité (RGAA) qui détermine les normes d’accessibilité et les critères de mise en conformité.
Le RGAA est donc un référentiel européen et documenté, à télécharger. Attention, parfois les termes peuvent être très techniques. Nous te conseillons de te tourner vers un article qui vulgarise les normes RGAA, tu peux également trouver de nombreuses vidéos YouTube sur le sujet.
Ce qu’il faut savoir :
Le RGAA possède une liste des sociétés et des organismes qui ont pour obligation de respecter ces normes d’accessibilité.
Dans l’article 47, la loi Handicap de 2005 impose à l’État et aux collectivités de rendre accessibles leurs sites internet aux personnes handicapées. En voici la liste complète :
les services de l’État ;
les collectivités territoriales ;
les établissements publics ;
les organisations légataires d’une mission de service public ;
les entreprises dont le CA en France est supérieur à 250 000 millions d’euros ;
les organisations d’intérêt général.
Le RGAA est donc un référentiel très important, car si ces sociétés ne respectent pas les normes d’accessibilité, elles peuvent être soumises à des amendes et une optimisation immédiate de leur site web.
Le DINUM est un organisme européen et il n’est pas le seul à déterminer les standards d’accessibilité.
Standards W3C
Le W3C ou World Wide Web Consortium désigne un organisme international à but non lucratif. Son but est de déterminer les standards techniques liés au web. Et surtout, il détermine les mêmes règles d’accessibilité pour les développeurs du monde entier.
Un objectif, favoriser l’accès au web au plus grand nombre.
Là encore, leur documentation peut-être complexe et demande beaucoup de connaissances techniques. Des personnes cherchent à vulgariser les normes et donnent de précieuses informations. Tu peux les retrouver sur les comptes YouTube de W3C Web Accessibility Initiative (WAI) et de DesignGouv
W3C a mis en place des directives à suivre pour rendre un site web accessible, ainsi qu’un référentiel de conformité, le WCAG.
Que sont les WCAG ?
Les directives WCAG — Web Content Accessibility Guidelines — représentent un ensemble de normes qui permettent de rendre accessible le contenu web.
Ce sont les bonnes pratiques recommandées par le W3C. Ces normes ne sont pas obligatoires, mais elles représentent un outil important pour les développeurs.
Les recommandations des WCAG sont au nombre de treize. Chacune possède des critères de succès et un niveau de conformité associé — A, AA, AAA.
Selon les WCAG le contenu web accessible doit suivre quatre principes : être perceptible, utilisable, compréhensible et robuste.
Perceptible : Ajouter du texte alternatif aux images, aux boutons et autres objets. Ne pas utiliser seulement la couleur comme moyen visuel de communication d’informations, rendre réglable, en taille, la partie textuelle.
Utilisable : Pouvoir naviguer sur ton site grâce au clavier, pouvoir naviguer entre les pages de plusieurs façons, éviter les éléments pouvant provoquer des crises — lumières clignotantes, changement brutal de couleur, trop d’animations, etc. —, organiser ton contenu avec des titres.
Compréhensible : Permettre au lecteur d’écran de déterminer la langue utilisée sur ton site, créer une navigation cohérente tout au long de ton application.
Robuste : Publier du contenu en format HTML, donner des noms et assigner des rôles et des valeurs à tous les éléments de ton site.
Les niveaux de conformité
Si tu souhaites savoir si ton site est conforme avec les normes que nous venons de voir, les niveaux de conformité sont là pour t’aider.
Chaque recommandation WCAG est accompagnée de critères de succès testables. Chaque critère de succès correspond à un niveau de conformité. Il est attribué suivant son impact sur l’accessibilité.
Le niveau de conformité A
Ce niveau est le critère le plus bas. Mais il permet aux personnes lambda d’accéder à ton contenu. Ce sont des techniques faciles à mettre en place et elles facilitent les tous premiers accès.
Exemple : Les contenus audio préenregistrés ont des sous-titres à moins que l’audio ne soit la transcription d’un texte écrit.
Le niveau de conformité AA
Les critères de réussite du niveau AA sont plus exigeants. Elles ne sont pas toujours faciles à mettre en place et demandent un peu plus de gymnastique technique. Mais ce niveau offre plus de confort aux utilisateurs atteints de handicap et peut avoir un impact important sur ces personnes. Dans l’idéal, ton site doit atteindre ce niveau de conformité pour être accessible au plus grand nombre et de manière efficace.
Exemple : Toutes les vidéos ont une audiodescription.
Le niveau de conformité AAA
Ces critères de succès peuvent être difficiles à atteindre. Parfois même, coûteux pour leur mise en place. Ce niveau de conformité n’est pas requis sur tous les sites web actuellement, car il correspond à un public restreint. Si tu es dans le milieu social ou administratif, nous te recommandons le niveau de conformité à l’accessibilité AAA.
Exemple : Tous les contenus audios sont accompagnés d’une version en langue des signes.
Dans tous les cas, fais de ton mieux pour remplir un maximum de cases et améliorer l’expérience utilisateur de ton site web pour plus d’inclusivité.
À quoi dois-je être attentif ?
Le développement c’est aussi du préfabriqué, car lorsqu’un développeur va chercher du code déjà conçu dans des librairies open source, il implémente des blocs de code déjà existants. Ces blocs n’ont pas forcément été codés avec des standards d’accessibilité.
Et pour corriger ça, tu as, ARIA.
Qui est ARIA ?
Et bien non, ce n’est pas de la jeune Stark dont il s’agit, mais bien d’un sigle qui signifie, Accessible Rich Internet Applications Suite.
Nous pourrions comparer ARIA avec WCAG, ce sont des directives qui permettent de modifier du code natif non accessible.
ARIA est un ensemble de rôles et d'attributs qui définissent comment rendre le contenu et les applications web accessibles. Il vient compléter le langage HTML. Comme je te l’ai dit, de base le langage HTML est configuré pour être accessible. Mais le web va très vite et certains blocs de code ne sont pas adaptés à l’accessibilité.
Lorsque tu rencontres des zones de « trou » dans ton accessibilité — ce qui arrive fréquemment —, il est possible d’ajouter des attributs ARIA à ton langage HTML.
Cette astuce te permet de rendre ton code accessible aux outils de lecture.
Pour t’assurer de la bonne conformité de ton langage, fais appel à un professionnel pour mettre en place un audit.
Tu peux également te servir des outils suivants :
Lighthouse : Cet outil te permet de vérifier tous les aspects d’accessibilité sur un site déjà existant et en ligne.
La suite Axe : Si ton site est en constante évolution, ces outils te permettent de contrôler continuellement les mises à jour et donc l’accessibilité de ton site sur le long terme.
HTML_Code Sniffer : Grâce à lui tu peux vérifier la conformité de ton contenu aux réglementations de ton choix comme WCAG, le niveau A, le niveau AA et le niveau AAA.
Pourquoi rendre mon site accessible ?
Si, une fois arrivé ici, tu te demandes pourquoi faire tout ça, parce qu’au fond ce n’est pas obligatoire et plutôt complexe d’un point de vue technique. Écoute ceci.
On commence par un petit topo sur, pourquoi rendre ton site web accessible, suivi d’informations ultras pertinentes sur, comment établir les premiers standards tout seul de chez toi.
92 % des consommateurs sont plus enclins à soutenir une entreprise qui facilite l’accès physique et digital.
Un site accessible = un site inclusif et efficace
Tu vas voir que les améliorations techniques apportées par les normes d’accessibilité vont plus te servir que tu ne le penses.
Aspect éthique : Ton site est plus inclusif — ouvert à tous — lorsque tu respectes ces standards. Comme le commerçant qui place une rampe d’accès devant sa boutique. Tu donnes à tout le monde la chance de naviguer sur ton site ou dans ton magasin. De plus, ça te permet de valoriser ton engagement à favoriser l’accessibilité pour tous.
« En France, 1,7 million de personnes sont atteintes d’un trouble de la vision. » Fédération des aveugles de France
Toutes ces personnes ont des difficultés à accéder aux mêmes services et produits qu’un voyant sur le web.
Aspect commercial : Ce point rejoint celui précédemment cité.
Si ton site n’est pas accessible à une partie de la population, tu perds des clients et donc du chiffre d’affaires. Si tout le monde est pris en compte dans ton business plan et que tu as établi tes personas, il est préférable de ne pas faire de discrimination virtuelle.
« À l’échelle mondiale, au moins 2,2 milliards de personnes ont une déficience visuelle touchant la vision de près ou de loin. » OMS — Cécité et déficience visuelle
La population française est de manière générale vieillissante. La vue est l’un des sens les plus en déclin lorsque l’on vieillit. C’est donc un paramètre important à prendre en compte aujourd’hui et pour les années à venir.
Aspect technique : D’un point de vue technique, les normes et standards de base conseillés permettent de structurer et de simplifier ton site internet. Le travail sur les contrastes et la police sont des points importants pour les malvoyants, mais aussi, les voyants.
En optimisant ton site web pour une meilleure cohérence dans tes contenus, tu amélioreras ton SEO. Ces changements te seront profitables lors d’une analyse Google, car le moteur de recherche est particulièrement friand des sites bien structurés et accessibles.
« Une étude révèle que sur 418 personnes souffrant de déficiences visuelles, 80 % utilisent un ordinateur. » Aveugles de France — Rapport usage des lecteurs d’écran
Un contenu plus intuitif sera aussi agréable pour un voyant qu’un malvoyant.
Que puis-je faire moi-même ?
Si tu es un professionnel du web, je ne peux que te conseiller d’apprendre les règles et standards du RGAA.
Si tu es un particulier et que tu souhaites améliorer l’accessibilité de ton site web, je te conseille de suivre les points suivants. Si certains sont trop complexes, tu peux te tourner vers un développeur — ayant des connaissances dans ce domaine — ou un professionnel spécialisé dans les normes W3C.
Commençons par voir ce qu’il est possible de faire.
Les premières modifications
La lisibilité :
C’est un aspect qui peut largement être corrigé par des mains non expertes ! Pour assurer une bonne lisibilité sur ton site web, il te faut regarder ta typographie, les couleurs et les contrastes.
La typographie représente la police que tu utilises et sa taille. Assure-toi qu’elle est assez originale, mais pas trop, pour que tout le monde puisse en distinguer les caractères. Nous te recommandons d’utiliser une police de minimum 14 pixels.
La taille de ta police est également importante. Si tu ne peux pas changer la taille des caractères, fais en sorte que l’utilisateur puisse zoomer sur ton contenu.
Pour ce qui est des couleurs, sers-toi de ces outils : Cf : Avec quels outils ? Ils te permettent de vérifier la lisibilité de ton texte sur un fond.
Si ton fond est bleu clair et que ta typographie est jaune, il y a alors de fortes chances que ton texte soit difficilement lisible pour un voyant, alors imagine pour un malvoyant.
Bien souvent, la nuance entre les couleurs est beaucoup plus subtile que mon exemple. Certaines couleurs ne font pas bon ménage ensemble ou simplement, les couleurs foncées ne font pas de très bons fonds — toi aussi tu as parfois du mal à lire en mode nuit.
Mettre des espaces ! Pour qu’un contenu soit facilement lisible et identifiable, il faut l’aérer. Mets des espaces pour bien délimiter les différentes parties de ton contenu et créer des aérations un peu partout pour ne pas retrouver un effet « pavé ».
Des outils de contraste pour t’accompagner dans ta transition.
Contrast checker : Vérifier le contraste entre le fond de ton site et le premier plan. Il fonctionne pour les textes et les formes — boutons, textes, encart.
Contrast : Est un plug-in sur figma pour t’aider lors de la conception de tes maquettes.
La cohérence :
Avec ou sans expert, des modifications peuvent être rapidement établies en termes de cohérence.
Ce qui rend un site cohérent et intuitif est de faire en sorte que les éléments soient correctement identifiés et facilement identifiables.
Il est donc primordial de pouvoir distinguer les éléments interactifs et ceux qui ne le sont pas pour les humains comme pour les lecteurs d’écran. Quelques exemples à mettre en place : souligner les liens internes et externes, encadrer les boutons, etc.
Comme je le disais tantôt, les malvoyants ne peuvent pas se baser sur les couleurs pour comprendre l’information. Le rouge peut signaler un avertissement ou une erreur. Pour les personnes atteintes de handicap, ce rouge peut leur paraître bleu, elles ne comprendront donc pas la nature du message comme un voyant. Veille à mettre systématiquement du texte — en majuscule par exemple — et un langage HTML adapté.
Cohérence des libellés : Tous les éléments de ton site doivent être en ligne avec les bonnes nominations, pour que les lecteurs d’écran ne soient pas perdus ou sautent des informations.
Le contenu interactif doit être accessible à tous ! Pense donc à mettre des sous-titres sous tes vidéos, retranscrire les fichiers audios, décrire les images, les logos, les dessins, les icônes, etc.
Être attentif à son audience :
Suivant la nature de ta société, ta clientèle peut varier, mais es-tu sûr d’avoir fait le nécessaire pour répondre aux besoins de ton audience ?
Pour un business au poil, inclues des personnes atteintes de handicap dans tes personas. Documente-toi, cela te donnera une vision plus précise du public concerné par ton produit ou ton service. Et donc rendre accessible celui-ci à toute ton audience.
Ne te lance pas dans de jolis designs incompréhensibles et inaccessibles. Sois attentif à ce que tu fais pour ne pas perdre ton client et améliorer l’optimisation SEO de ton site.
La tolérance
Malheureusement, la plupart du temps la partie UX — expérience utilisateur — et l’accessibilité ne sont pas bien prises en compte en entreprise. Ne fais pas comme ça s’il te plaît. Si tu es en mesure d’améliorer l’accessibilité de ton site, fais-le et mets-toi à la place de ces personnes qui ne peuvent intéragir confortablement avec le contenu web d’aujourd’hui.
Le 25 février 2022, les chiffres de l’observatoire sont enfin publiés : nous y apprenons que 76 des 241 démarches en ligne les plus utilisées sont classées comme « accessibles ». https://cncph.fr/chiffres-web-public/
Alors tente de rendre toutes tes fonctionnalités accessibles au clavier. Et de laisser, à l’utilisateur, suffisamment de temps pour lire et utiliser ton contenu.
La qualité des feedbacks
« Votre message a bien été envoyé. » Nous avons tous eu ce message qui fait « pop » en haut à droite ou en bas à droite de notre écran. (Personnellement, il y en a beaucoup que je n’ai pas vus passer.)
Ces infos pop-up ou push sont des gros sujets d’accessibilité. Si l’information « pop » alors que le malvoyant fait autre chose, ni lui ni le lecteur d’écran n’est en mesure de le repérer.
Pour une bonne accessibilité, le lecteur d’écran doit pouvoir réagir et le lire à l’utilisateur qui, lui, est concentré sur autre chose.
Cela fonctionne également pour les messages d’erreur et mots de passe invalides. Si la notification push ne semble pas adaptée à ton message, n’hésite pas à créer une page d’erreur et non une notification.
Si la notification est la meilleure option, pense à bien documenter toutes tes interactions afin que les utilisateurs voyants et malvoyants puissent s’y retrouver.
Ce qu’il faut retenir
Allez, parce que cet article est super dense, mais super important, voici les points principaux à retenir pour une bonne accessibilité.
Une bonne structure de site, pour faciliter le déchiffrage des lecteurs d’écrans et améliorer ton SEO ;
Un contenu web clair et bien hiérarchisé : des polices lisibles, la taille du texte, un contenu accessible et une mise en page bien aérée sur chaque page ;
Un accès clavier pour une navigation simplifiée sur les contenus et fonctionnalités ;
Des formulaires lisibles, des liens et des boutons clairs ;
Des images détaillées et des vidéos bien sous-titrés ;
Des notifications visuelles en plus de celles auditives ;
Limiter les publicités et messages pop-up intrusifs ;
Du contenu avec un langage compatible avec celui des lecteurs d’écran ;
Un design simple et épuré.
Tu as toutes les bases pour améliorer l’accessibilité de ton site, c’est donc à toi de jouer ! Augmente ton trafic et rend accessible ton contenu à une majorité de personnes qui seront, surement, intéressées par ton business. Car tu fais en sorte de rendre disponible l’information et les ressources à toutes les personnes qui utilisent les services et produits du web.
Conclusion
Les points sur lesquels tu peux te focaliser et ce que tu dois absolument prendre en compte pour la vie future de ton ou tes sites web.
Concentre-toi sur les contrastes, c’est le premier paramètre sur lequel tu peux interagir facilement et rapidement. Sers-toi des outils que nous t’avons proposés ou trouve celui qui te convient le mieux sur internet.
Si tu souhaites demander à un développeur de créer ton site ou d’en faire une refonte, demande au designer, dès le début, d’être inclusif dans ses maquettes. Cela te reviendra bien moins cher d’anticiper ces fonctionnalités que de les faire ajouter après la livraison.
Grâce au développement des écoles, pour personnes atteintes de handicap, beaucoup de jeunes entrent sur le marché du travail. Ces jeunes font, comme nous tous, appel au web pour trouver du travail ou bien travailler. Il est important de leur laisser la chance de parcourir tout ce qui s’y trouve.
Nous en avons parlé tout à l’heure, la population est vieillissante, les démarches administratives et les achats se font de plus en plus via internet.
Lorsque nous vieillissons, rappelons-nous que nous perdons progressivement un peu de nos sens — la vue, l’ouïe, notamment.
(Personnellement, je serais contente de pouvoir continuer à me servir seule d’un ordinateur pour mes démarches administratives, quand ma vue aura baissé.)
C’est fini pour aujourd’hui ! J’espère que cet article t’aura aidé à comprendre les principes de l’accessibilité sur les contenus web et que tu en feras bon usage.
À bientôt !
Si tu veux aller plus loin, tu peux consulter notre livre blanc : Améliorer le trafic de votre site web
