Rendre les services en ligne accessibles aux personnes en situation de handicap : voilà l’enjeu majeur de l’accessibilité numérique si on s’en tient à une simple définition.
Qui serait contre ? Pourtant, dans les faits, les avancées sont bien lentes, et les conséquences franchement lourdes. Or, c’est un thème concret d’inclusion et d’équité, avec un impact formidable pour les personnes en situation de handicap qui sont avant tout… vos clients, vos collaborateurs, vos partenaires !
L’accessibilité numérique est résolument une question de choix (et de respect de la loi) , pas une question de technologie. Les réticences qui auraient pu être liées à des interrogations sur la faisabilité technique, les délais, les coûts n’ont plus lieu d’être.
De nombreuses innovations qui font partie de notre quotidien ont pour point de départ une question d’accessibilité : le SMS a été inventé pour les personnes muettes, le vibreur pour les personnes malentendantes, la télécommande pour les personnes à mobilité réduite, les assistants vocaux comme SIRI pour les personnes non-voyantes et le surlignage jaune pour les personnes dyslexiques.
L’accessibilité numérique est donc la capacité de permettre à tous – équipes, clients, clients de nos clients- d’avoir accès à l’intégralité des contenus numériques, quels que soient la situation, les handicaps et par tous moyens.
Par ses fonctions et ses missions, le secteur de la communication se doit d’être exemplaire et moteur dans la transformation pour une société plus juste, inclusive, harmonieuse, ouverte et performante.
ACCÉDER DIRECTEMENT
De plus en plus d’acteurs sont concernés et le champ d’application de l’accessibilité digitale s’étend.
Il concerne pour l’heure : services de l’Etat, les collectivités territoriales, les établissements publics, les organisations légataires d’une mission de service public, les entreprises dont le chiffre d’affaires en France est supérieur à 250 millions d’euros et les organisations d’intérêt général. Ces bonnes pratiques ont vocation à être généralisées.
Depuis le 23 septembre 2020, tous les sites internet, intranet et extranet des collectivités et organismes publics doivent être accessibles aux personnes handicapées. C’est une étape fixée par le décret du 25 juillet 2019. Le texte met en application les dispositions de la loi « handicap » de 2005, de la loi « pour une République numérique » de 2016, et de celle de 2018 « pour la liberté de choisir son avenir professionnel ».
La direction interministérielle du numérique (DINUM) édite le référentiel général d’amélioration de l’accessibilité (RGAA, anciennement référentiel général d’accessibilité pour les administrations)
Avant de commencer
La création d’un site web ou d’un service digital accessible n’est pas fondamentalement différente d’une approche “classique” : il ne s’agit pas d’adopter une technologie plutôt qu’une autre, d’acquérir une compétence spécifique, ou de changer radicalement vos méthodes de travail, mais davantage de vous fixer des objectifs, de faire les bons arbitrages, et surtout de vous astreindre à la plus grande rigueur tout au long du projet. Une fois cette ligne de conduite adoptée, tout devient une question de bon sens.
Vigilance dans la rédaction du brief tout d’abord : Considérer sincèrement le sujet. Votre site ne sera accessible à tous que si vous le décidez ; en vous fixant un cap, une feuille de route avec ses métriques et son budget associé.
Rigueur dans la conception UX/UI ensuite, notamment en résistant à certaines tentations esthétiques qui peuvent desservir l’expérience de utilisateurs (tons sur tons, animations rapides, “gamability” …).
Attention, vos efforts d’accessibilité pendant la phase de conception ne doivent pas se limiter au seul travail de wireframing / design stricto sensu : il s’agit aussi d’accorder une attention particulière aux mots, aux libellés de vos call to actions, aux contenus de vos documents pdf … L’accessibilité est une réflexion à mener à tous les niveaux !
Ne rien lâcher dans le développement enfin, en vous astreignant au respect de normes qui concernent la structuration du code, la documentation du contenu, et en mettant en place des procédures de tests adaptées tout au long de la production technique.
Ne pas avoir peur des dilemmes : créer un site accessible revient à résoudre une équation complexe qui ne connaîtra pas de solution simple ni parfaite. On cherche en effet à concilier des impératifs marketing et commerciaux avec la prise en compte des invalidités liées à la vue, à la préhension ou à l’ouïe. Le designer doit nous émouvoir tout en se rappelant que certains voient mal, ou pas du tout ; l’ergonome doit nous surprendre sans oublier que certains ne peuvent pas être précis dans leurs gestes ; le vidéaste doit transmettre un message complet à ceux qui n’entendent pas.
Enfin, vérifier. Il s’agira de compléter une check-list dont le contenu est déjà accessible sur le référentiel mis à disposition par la direction interministérielle du numérique.
Cependant, ce travail de fond ne peut avoir de sens que si vos équipes et votre agence s’approprient la problématique, et mettent en place une démarche globale basée sur la compréhension des besoins de l’utilisateur final, et des limites que peut connaître son expérience sur le web.
Au-delà d’un objet de vulgarisation, les étapes présentées dans la suite de ce document ont donc pour vocation d’être des repères pour tous, des caps qui donnent du sens au travail sur l’accessibilité web, pour permettre ensuite de l’implémenter concrètement à votre projet.
Le brief
Penser accessibilité-first : 4 réflexes à intégrer dès la conception de votre brief
Le brief est une étape clé de votre projet en ce qu’il détermine ses contours, son périmètre et vos attentes. Le brief permet de se mettre en mouvement, mais constitue également une feuille de route à laquelle il sera utile de se référer tout au long de la production. Rappel de quelques bonnes pratiques simples pour assurer l’accessibilité du produit final, et qui ne peuvent pas nuire à sa qualité globale !
DÉFINIR DES OBJECTIFS :
En premier lieu, il convient de se positionner sur la finalité de votre projet, ce qui justifie son existence. Informer l’utilisateur ? Permettre un acte d’achat ? Générer des demandes de devis…? La définition d’objectifs permet de structurer le projet, et de réaliser les bons arbitrages tout au long de la production.
Si votre organisation répond aux critères cités dans la section cadre légal, vous êtes tenu de réaliser, entre autres, une déclaration d’accessibilité. Le formalisme est dans ce cadre plus strict, et vous pouvez être astreint au respect d’un certain niveau d’accessibilité. En toute hypothèse, vous devrez déclarer le niveau d’accessibilité de votre site (totale, partielle ou on conformité).
VISER LA SIMPLICITÉ :
De manière générale, plus un dispositif web sera simple, plus on se donne de chances de le rendre accessible à tous. On cherche donc, dès la conception du brief, à éliminer tout ce qui est superflu à la complétion des objectifs de l’utilisateur. Du bon sens !
PENSER “ACCESSIBILITÉ-FIRST” :
Au-delà d’une liste de critères, l’accessibilité est un processus continu, qui implique de se poser quelques questions simples tout au long du projet : l’information est-elle toujours compréhensible si je ne distingue pas les couleurs ? Suis-je en mesure de remplir un objectif si le contenu d’une page m’est lu à voix haute ? Puis-je cliquer sur ce bouton si mes mains tremblent ? Puis-je comprendre ce texte s’il abuse des acronymes et que je ne connais pas les termes experts ?
MESURER :
Inclure l’accessibilité à vos pré-requis, et définissez des KPIs : tout ce qu’on mesure s’améliore, votre brief formulera donc clairement vos exigences en termes d’accessibilité, et les métriques associées à vos impératifs.
AUDITER :
Spécifiquement dans le cas où vous êtes tenus de réaliser une déclaration d’accessibilité, l’audit par un tiers spécialiste et indépendant sera une étape incontournable pour déterminer le niveau d’accessibilité du site, exprimé en pourcentage et rapporté en accessibilité totale / partielle / non conforme.
Le design
Un design accessible : notre échantillon de 5 points essentiels à valider en UX/UI
Les phase de conception (UX) et de design (UI) sont pivots en matière d’accessibilité : s’il est toujours possible de modifier à posteriori un contraste, une taille de typographie ou une formulation pendant la phase de développement, ne pas anticiper vos contraintes dès la production des maquettes constitue nécessairement un handicap en phase de développement.
5 points doivent ainsi requérir toute votre attention lors du design de votre projet web, attention cette liste n’est pas exhaustive, et constitue notre sélection – subjective et imparfaite – des points les plus critiques en matière d’accessibilité d’un design.
Retrouvez l’ensemble des critères et tests du RGAA à respecter pour une pleine accessibilité de vos productions numériques en suivant ce lien.
CONTRASTE ET TAILLE
Une attention toute particulière doit être portée aux notions de contraste (différence de ton entre deux couleurs superposées) et de taille des éléments, notamment en ce qui concerne les contenus textuels. De nombreux outils permettent de s’assurer que ces deux critères sont remplis, par exemple https://contrastchecker.com.
Au-dessus, un contraste insuffisant, au-dessous un contraste suffisant, la validation ou non du niveau de contraste peut dépendre de la taille de la typographie.
COULEURS ET FORMES
De la même manière, le sens d’un élément ne peut pas dépendre de sa couleur ou de sa forme. Par exemple, un message d’erreur ne peut pas se réduire à l’utilisation de la couleur rouge, ou à l’utilisation d’une signalétique triangulaire. L’erreur doit être explicitement formulée.
A gauche, l’information dispensée par l’icône en rouge est insuffisante car pas assez explicite notamment dans le cadre d’une lecture assistée, à droite on formule textuellement l’erreur.
EXHAUSTIVITÉ DES INDICATIONS TEXTUELLES
Les liens, et les éléments de navigation en général, doivent donner une indication claire quant à leur destination. On préférera ainsi les liens explicites de type “Lire l’article”, “Accéder à la page équipe” ou encore “Aller au formulaire de contact” plutôt que des formulations générique de type “En savoir plus” ou “Découvrir”.
À gauche, le contenu du bouton ne donne pas assez d’informations sur la destination du lien, qui en revanche est parfaitement explicite à droite.
NE PAS FONDER LA NAVIGATION SUR L’HABILETÉ DE L’UTILISATEUR
On évitera ainsi les clics sur des zones trop restreintes, et on limitera les actions complexes (le drag and drop par exemple, qui impose de maintenir cliqué et de déplacer la souris), en privilégiant lorsque c’est possible des actions plus simples (clic seul par exemple).
Pour assurer la pleine accessibilité de votre contenu, assurez-vous que celui-ci est accessible de trois manières différentes, par exemple via la souris ou le trackpad, via une navigation au clavier, et via une commande vocale.
ÉVITER TOUT CE QUI CLIGNOTE
Enfin, les effets “stroboscope” sont à proscrire (clignotements, flashs, lumières intermittentes …).
Le code
Vos navigateurs sont en situation de handicap
Firefox, Google Chrome, Microsoft Edge … Les navigateurs que nous utilisons pour accéder à internet sont par essence en situation de handicap : non-voyants, malentendants et disposant de facultés motrices restreintes, leur navigation sur un site n’est possible que grâce à un code dont ils comprennent la sémantique et le contenu. Le développement n’admet pas l’approximation, mais supporte qu’on en synthétise l’esprit, ici en 4 étapes pour les questions d’accessibilité.
STRUCTURE DU CODE
L’injonction la plus fondamentale en terme d’accessibilité concerne le respect des normes du W3C, qui visent à unifier la sémantique sur le web. Ainsi, toute ligne de code doit être déclarée conformément à sa finalité ; un lien sera par exemple signalé par une balise <a>, le titre principal par une balise <h1>, et un champ email dans un formulaire de contact par la balise <input type= »email »>.
L’attribut html « type=email » permet notamment l’auto-complétion depuis un mobile, et l’identification du type par un logiciel de lecture assistée.
MISE EN PLACE D’ALTERNATIVES
La structuration du code permet la mise en place d’alternatives, par exemple la navigation avec les flèches du clavier plutôt qu’avec la souris, ou encore la lecture par un logiciel du contenu d’une page web.
Les attributs « aria-label=pagination next » permettent la navigation sur une pagination via les flèches du clavier plutôt qu’à la souris.
SOIGNER LES CONTENUS MÉDIAS
Les images, vidéos et fichiers sonores sont les composants les plus délicats en terme d’accessibilité car, contrairement aux contenus textuels, leur sens n’est pas directement compréhensible par les navigateurs web : votre navigateur ne “comprend” pas une image que vous lui présentez, à moins que vous ne lui en indiquiez vous-même le sens ! Les images doivent donc être agrémentées d’alternatives textuelles (attributs “alt”), et les vidéos autoriser l’audiodescription. De manière générale, on évitera au maximum que le sens d’une page web repose sur son contenu média.
Quelques précisions sur les textes alternatifs (attribut « alt »)
TESTER, TESTER, ET TOUJOURS TESTER
De nombreux outils, par exemple Wave Evaluation Tool permettent d’évaluer lors de la production la qualité de l’accessibilité d’un site, et fournissent à la fois des outils de diagnostic et de correction des problèmes rencontrés.
Penser un support numérique de manière à le rendre réellement accessible c’est avant tout chercher à en augmenter l’efficacité ! Ça devrait leur parler !
Il sera adapté à un plus grand nombre de personnes parmi vos publics cibles : 20% de personnes en France ne peuvent utiliser les outils et services numériques du fait de leur handicap (source : Secrétariats d’Etat chargés des personnes handicapées et du numérique).
En réfléchissant au parcours le plus simple et clair pour guider vos publics vers l’information, le produit ou le service pour lequel est conçu ce support numérique, cela bénéficiera à tous.
En améliorant l’accessibilité de votre site vous créez des conditions optimales de référencement.
En simplifiant vos pages, vous améliorez significativement la portabilité sur les différents supports (dont le mobile).
Et, cette plus grande efficacité ne vous coûtera pas plus cher. Travailler sur l’accessibilité vous demandera certes un travail de réflexion/conception important, mais cela n’implique pas de développer des fonctionnalités spécifiques, au contraire.
Enfin, améliorer l’accessibilité de votre support numérique pourra vous aider à réduire/limiter votre empreinte carbone avec un moins grand nombre de pages et, surtout, avec des pages moins lourdes.
Plus spécifiquement pour les DSI, il est à noter que, le code ayant été développé sur la base de standards, l’évolutivité et la maintenance en seront simplifiées.
Proposer à un client un site/plateforme/appli/… répondant aux standards d’accessibilité aura pour vous plusieurs avantages :
Cela implique que la phase de conception sera plus approfondie, l’objectif mieux défini et les fonctionnalités réellement nécessaires mieux évaluées, le projet n’en sera ainsi que plus simple à piloter lors de la phase de production.
Vous permettrez à votre client d’obtenir un support numérique plus performant, sans surcoût, pour lequel il pourra revendiquer une démarche socialement et environnementalement plus responsable.
Mais, penser accessibilité, c’est penser global.
Vous devrez avoir cette logique aussi bien au moment de la conception, de la création, du développement que dans la réflexion sur les contenus.
Il est d’ailleurs essentiel de partager cette prise de conscience avec votre client. Concevoir une coquille technique répondant au RGAA, sans se soucier de l’accessibilité des contenus qui la feront vivre n’aurait que peu d’intérêt. Et, cette logique globale implique de se poser la question de l’accessibilité même lorsqu’il ne s’agit pas d’un projet nécessitant du développement technique. Les posts sur les réseaux sociaux, par exemple, peuvent/doivent aussi être pensés pour tous.
Non, accessibilité ne rime pas avec austérité mais plutôt avec simplicité. Votre souci de l’esthétique n’est donc absolument pas à mettre de côté.
Mais, soyons honnête, votre rôle va être décisif. Pourquoi ? Parce que la création graphique est la première traduction du travail de conception, avant le développement, c’est donc à ce moment-là que des choix stratégiques vont être faits. Il s’agit pour vous de sublimer sans sophistiquer.
Le point positif ? Vous disposerez d’arguments objectifs pour défendre votre création ; des arguments qui devraient vous aider à faire sortir votre/vos interlocuteur(s) du si fréquent « j’aime » / « j’aime pas » : l’accessibilité vous permet d’argumenter avec des éléments techniques et non biaisés par un jugement de valeur esthétique.
L’accessibilité est une garantie de simplicité. Car cela implique :
D’un point de vue technique, pas d’inquiétude, développer un site/plateforme/appli/… accessible ne vous demandera pas de savoir-faire spécifique. Il vous suffit de suivre les critères du RGAA.
Un registre de langage simple et accessible ne signifie pas qu’on renonce au sens. Au contraire, ces efforts bénéficient à tous.
Dans la check list :
Bien penser dès le départ ses documents : le transcript en particulier pour l’audiodescription des vidéos, et la présence d’un sous-titrage de qualité .
Les documents PDF quand ils sont disponibles en téléchargement, sont également à penser dès leur production pour être accessibles.
Comment et où se former ?
Quatre organismes de formations proposent des formations allant de la sensibilisation, au développement en passant par la création de contenus accessibles.
NB : Le FIPHFP peut vous aider à financer la formation des agents publics.
Il est aussi possible de s’informer et se former en s’abonnant à la liste de discussion dédiée à la RGAA :
https://groupes.renater.fr/sympa/subscribe/rgaa
Vous y retrouverez les normes internationales, composants réutilisables, critères RGAA et tests, outils et ressources…
Elle s’adresse donc aux responsables de l’accessibilité numérique, aux experts accessibilité, aux développeurs et intégrateurs web, aux ergonomes, UX designer et concepteur de services en ligne, aux producteurs de contenu web.
Les acteurs spécialisés et partenaires
Les acteurs les mieux placés pour vous aider à mieux faire en termes d’accessibilité et, pour commencer, à bien comprendre la réalité d’usage de vos publics, sont les associations.
N’hésitez pas à les contacter, à les soutenir et à travailler avec elles :
Agefiph (Association de Gestion du Fonds pour l’Insertion Professionnelle des Personnes Handicapées)
CFPSAA (Confédération Française pour la Promotion Sociale des Aveugles et Amblyopes)
Fédération des Aveugles de France
INR (Institut Numérique Responsable)
Des cabinets spécialisés comme Ideance sont également en capacité de vous accompagner.
S’inspirer
Pour vous aider à vous lancer ou progresser, vous pouvez regarder ce que d’autres ont fait de bien en la matière, par exemple :
ABC de l’accessibilité numérique – Fédération des aveugles de France
The digital accessibility handbook – Contentsquare
Guide pratique de l’accessibilité numérique
Livre blanc de l’accessibilité numérique
Outils d’audit
Extension Wave Evaluation Tool ( Chrome)
ARC Toolkit (outil de diagnostic d’accessibilité)
Outils de vérification du contraste
Contrast checker (version en ligne)
Contrast checker (version logicielle)
Outils pour les développeurs
Extension web developper (Firefox)
Extension web developper (Chrome)
Autres outils
Synthèse vocale Windows – lecteur d’écran libre et gratuit
(Page)
Ou comment assurer un accès universel aux films publicitaires TV en touchant 5,4 millions de personnes sourdes ou malentendantes en France. Grâce à la loi du 11/02/2005, depuis février 2010, 100% des programmes des chaînes dont l’audience moyenne annuelle dépasse 2,5 %* de l’audience totale sont accessibles aux personnes sourdes et malentendantes… à l’exception des […]
(Page)
Ou comment assurer un accès universel aux films publicitaires TV en touchant 1,7 millions de personnes aveugles ou malvoyantes en France. Être force de proposition auprès de vos clients en matière d’audiodescription des films publicitaires, c’est répondre à leurs attentes d’une communication plus responsable. 75% des personnes déficientes visuellement déclarent qu’une marque qui fait le […]
