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” …).

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 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.

A gauche, un contraste insuffisant, à droite 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.

J’en parle aux clients

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.

J’en parle aux designers

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.