Design

Comment challenger l’accessibilité de votre plateforme en 5 points clés ?

Introduction

Chez Bam, nous travaillons pour parfaire l’accessibilité de nos plateformes. À partir du 28 juin 2025 (source : Site de la direction interministérielle du numérique DINUM), la plupart des services numériques devront être accessibles. Les sites et applications déjà en fonction auront un délai supplémentaire de cinq ans pour se mettre en conformité. Comment parvenir à réajuster ou corriger le niveau d'accessibilité de ma plateforme pour être conforme aux exigences légales ? Comment puis-je, tout simplement, relever les défis liés à l'accessibilité d'une plateforme déjà existante ?

Mais que dit la loi exactement ?

👉 La réforme prévoit d'élargir l'obligation de respect du RGAA à toutes les entreprises réalisant un chiffre d'affaires supérieur à 2 millions d'euros. Soit pour les cinq types de services numériques, remplaçant ainsi la limite actuelle de 250 millions d'euros (valable pour les plateformes d’organismes internes). (Plus d’informations dans l’article “Applications mobiles et obligation d’accessibilité : que dit la loi ?”)

👉 Les sanctions pour non-respect seront renforcées, passant de simples amendes à de véritables poursuites judiciaires.

👉 Des contrôles réguliers seront effectués par les autorités compétentes pour veiller à ce que tout le monde respecte les règles. Il est même question de permettre aux utilisateurs de signaler les cas d'inaccessibilité lors de leur navigation.

Faire un état des lieux de l’existant

Chez Bam, nous veillons à ce que nos projets respectent plusieurs critères essentiels pour garantir la réussite de votre plateforme afin d’avoir une meilleure expérience utilisateur. À cette fin, nous avons élaboré une grille que vous pouvez utiliser en tant que designer. Cette grille sert de point de départ pour la conception d’un produit accessible et vous guidera dans l’amélioration de l’expérience de votre produit.

Cette grille est composée de 5 point clés :
  • Le contenu textuel : Le contenu apporte-t-il suffisamment d'information et de contexte ?
  • La couleur : Les couleurs fournissent-elles suffisamment d'information, et sont-elles surtout perceptibles ?
  • Les formulaires : Le formulaire est-il conçu de manière intuitive afin de ne pas exclure les utilisateurs ?
  • La navigation : La navigation est-elle simple d’utilisation pour tous les utilisateurs de la plateforme ?
  • Les interactions : Les interactions sont-elles trop distrayantes pour l’utilisateur ?

Passer à l’action

Il est parfois difficile de savoir par où commencer, notamment lorsqu'il s'agit de sujets liés à des parcours anciens et obsolètes.

Certains des points abordés ici sont plus actionnables et faciles à mettre en place que d’autres. La première étape, après avoir fait l’état des lieux du produit, est, en équipe, de déterminer ce qui est réalisable, de définir un objectif temporel, et de s’y engager collectivement (voir la théorie des objectifs SMART). Pour favoriser l’engagement, il est bénéfique d’intégrer pleinement l’accessibilité dans les rituels d’équipe. L'impact ? Une équipe sensibilisée et moins de risques que cela ne tombe dans l’oubli !

1. Le contenu, un moyen simple de fournir de l'information

Agir sur les contenus est un des leviers relativement actionnables dans un premier temps. Pour être accessible, on cherche à rendre le contenu le plus compréhensible et explicite possible, pour être adapté à la fois aux problématiques visuelles, mais aussi cognitives.

Privilégier des textes faciles à lire par :

  • Des listes et des titres uniques à chaque page avec une bonne hiérarchie
  • Des courtes phrases
  • Et des titres de page pertinents
Image contenant une
Exemple de hierachie

Des liens nommés explicitement :

  • Un intitulé clair pour chaque bouton
  • Rédiger des intitulés de liens
  • Utiliser les titres de liens
Nom du lien en hover

Proposer une alternative textuelle ou audio à chaque contenu :

  • Vidéo sous-titrée
  • Image et média avec des alternatives
Interface de lecteur vidéo avec une icône de lecture circulaire au centre et un texte d'espace réservé en latin ("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do") en jaune en dessous de l'icône. Le lecteur a une barre noire en haut et en bas sur un fond gris.
Vidéo sous-titre

Les termes utilisés sur le site doivent être cohérents :

  • Avoir des intitulés identiques pour les fonctions / les champs identiques
  • Cela rend le service familier et prévisible pour l’utilisateur
Image montrant un lien hypertexte intitulé "Mon intitulé de lien." en bleu souligné, avec un curseur en forme de main pointant dessus. Une info-bulle affichant "Mon titre de lien" apparaît à côté du curseur.

2. La couleur, un moyen d'apporter de l'information si elle est perceptible

La couleur est un sujet vaste qui joue un rôle crucial dans la lisibilité pour nos utilisateurs. Pour que votre plateforme soit utilisable, il est essentiel que vos contenus soient affichés avec des couleurs contrastées, permettant ainsi une lecture facile. Le rapport de contraste minimum à atteindre dépend de la taille et de la graisse des textes.

  • Texte normal, un ratio de minimum 4,5 (pour les textes inférieurs à 24 px)
  • Grand texte, un ratio de minimum 3 (pour les textes supérieur ou égal à 14 / 18,5 px)

Mais cela vaut également pour les boutons, champs de formulaires, icônes, et si la couleur n’est pas uniquement le seul moyen pour transmettre une information.

Image d'un outil d'évaluation de contraste des couleurs pour l'accessibilité web. Le taux de contraste est de 1.73:1, indiqué comme non conforme. Les résultats montrent que le texte normal et le texte de grande taille ne sont pas conformes aux normes AA et AAA, tandis que les éléments non textuels sont acceptés. Un exemple de texte est affiché à droite avec un champ de saisie et une case à cocher.
Utilisation de l’outil contraste checker : Userway

3. Les formulaires, un rôle dans l’utilisation d’un service ou d’une tâche

Le formulaire est un point d’attention majeur à prendre en compte. Mettre au niveau ces parcours en termes d’accessibilité est un chantier conséquent, mais qui est souvent central dans l’utilisation d’un produit.

Quelques pratiques :
  • Tous les champs sont nommés de manière claire.
  • L'utilisateur peut vérifier et corriger les informations saisies.
  • L'utilisateur reçoit de l'aide pour corriger ses erreurs.
  • Les champs obligatoires sont clairement indiqués, soit par un astérisque (*) avec une légende, soit par la mention "obligatoire".
Formulaire d'inscription avec champs obligatoires marqués d'un astérisque rouge. Sections pour sélectionner l'état civil (Madame ou Monsieur), entrer le nom, le prénom, l'email, et le numéro de portable. Explication en bas sur l'importance de fournir un numéro de portable pour valider la signature électronique.
Formulaire de création de compte sur le site Bpifrance en ligne

4. La navigation, un moyen dans l’utilisabilité d’une plateforme

S’attaquer à cette thématique peut demander plus d’investissement, puisqu’il s’agit de remettre parfois en question des éléments structurants de l’ergonomie du produit. Un utilisateur doit pouvoir naviguer facilement et de manière autonome sur votre plateforme. N’hésitez pas à tester votre plateforme avec différents modes de navigation (clavier, souris, lecteur vocal…) pour découvrir de nouvelles perspectives sur son utilisation et élargir votre champ d’action.

  • Garder une uniformité dans les fonctionnalités et contenus lors du passage en responsive
  • L'accès aux contenus cachés est facilité (avec une zone d’activation large et un affichage du contenu disponible au clavier)
  • L’utilisateur peut disposer de plusieurs moyens de navigation
  • Ne pas brider la possibilité de changer l’orientation de l’affichage
  • Des liens d’évitement sont proposés afin de permettre à l’utilisateur d’avoir systématiquement une alternative atteignable au clavier

5. Les interactions, ou comment ne pas (trop) perdre vos utilisateurs

Les interactions de votre plateforme doivent proposer des alternatives à penser dès le début de la conception de votre produit, ce qui peut être chronophage. Il faut donc l’anticiper avec ces quelques bonnes pratiques :

  • Les zones tactiles doivent être suffisamment grandes (web iOS 44px, Android 48 px) et éloignées les unes des autres.
  • Les utilisateurs ont besoin d’avoir du feedback sur leurs interactions, et les composants proposent différents états
  • Les distractions visuelles/animation s’arrêtent après 5 secondes ou ne perturbent pas l’utilisateur
  • Une alternative aux gestes complexes (pressions sur 2 zones à la fois, mouvements spécifiques type pinch) est proposée et faisable avec un seul doigt

Conclusion

En conclusion, cette grille vous permet de réaliser un mini-audit autonome de l’aspect accessible pour un designer. Elle ne remplace pas une analyse approfondie d’un audit d’accessibilité, mais elle vous fournit une base pour améliorer et perfectionner votre plateforme.

Même si la route peut paraître longue, chaque action menée dans le sens de l’accessibilité peut réellement avoir un impact perceptible et permettre d’améliorer l’expérience de vos utilisateurs. Alors n’hésitez pas à vous y mettre : si vous souhaitez en savoir plus sur l'accessibilité de votre produit ou envisagez de collaborer avec BAM pour un projet, n'hésitez pas à nous contacter !

Designer UX/UI ?

Rejoins nos équipes