Pour mettre son site en conformité avec le RGPD (règlement général sur la protection des données), une chose à faire est de permettre aux utilisateurs de choisir quels cookies « traceurs » activer sur son site.

Côté technique, plusieurs solutions existent pour mettre en place un tel outil sur un site. On pourrait dire que c’est un problème résolu. Malheureusement, beaucoup des outils « prêts à l’emploi » ont des lacunes dans la prise en compte de l’accessibilité numérique. Voyons ensemble quelques uns de ces problèmes et découvrons les solutions accessibles.

L’accessibilité des outils sur le marché

Quantcast

L’outil qui semble de loin le plus utilisé pour gérer les cookies d’un site est Quantcast. Côté accessibilité, on peut remonter un problème majeur : la navigation clavier.

• Il est impossible d’activer le lien « voir les objectifs » au clavier, car il ne possède pas d’attribut href. Sans attribut href, un a ne peut pas être focalisé via la touche tabulation et devient donc inatteignable au clavier. D’ailleurs, ce manque d’attribut href révèle que cet élément devrait plutôt être un bouton (balise button).
• Une fois dans la section listant les cookies à activer, il est impossible d’activer ou désactiver un cookie particulier au clavier : les interrupteurs sont codés avec des span simples. Il n’y a aucun autre attribut HTML sur le span qui permettrait au navigateur de comprendre qu’on veuille changer le comportement de la balise et la rendre focalisable.

Au final, pour les utilisateurs naviguant au clavier via la touche tabulation, il est impossible de faire autre chose qu’accepter tous les cookies pour accéder à un site utilisant Quantcast. Pour les utilisateurs au clavier utilisant un lecteur d’écran, il est possible de se débrouiller, via les touches directionnelles par exemple, mais cela reste assez laborieux.

tarteaucitron.js

tarteaucitron.js est un outil open-source très complet, suivi par une communauté française active. Et bonne nouvelle : ses lacunes majeures côté accessibilité ont pour la plupart été résolues ces derniers mois. Il reste cependant quelques soucis plus ou moins importants, parmi lesquels :

• La bannière informant l’internaute de l’utilisation de cookies est ajoutée en bas du DOM. Cela fait que la bannière peut passer complètement inaperçue pour les utilisateurs de lecteur d’écran, qui devront traverser tout le contenu de la page pour tomber dessus. Le mieux serait que la bannière soit ajoutée en haut du DOM, pourquoi pas juste après l’ouverture du body, afin que les utilisateurs de lecteurs d’écrans soient avertis dès leur arrivée sur le site.
• L’implémentation JavaScript de la boîte de dialogue de gestion de cookies est actuellement cassée.
• Avec un lecteur d’écran, reconnaître si un service est autorisé ou non est difficile. On reconnait si un service est autorisé principalement par le style donné aux boutons d’activation et de désactivation.

Finalement au niveau accessibilité, tarteaucitron s’en sort très bien. Mais certaines lacunes actuelles peuvent être vues comme bloquantes.

CookieBot

CookieBot est un outil commercial très utilisé, notamment sur des sites américains.

Quand on regarde le code HTML qu’il génère, c’est du tout bon : la bannière d’information est ajoutée en haut du DOM, la boite de dialogue a un balisage ARIA adapté, les éléments interactifs sont des éléments natifs du navigateur et sont donc par défaut compris au clavier…

Mais à l’usage, le comportement de la boite de dialogue est capricieux : quand on navigue au clavier via la touche tabulation, il est facile de sortir de la boite de dialogue sans le faire exprès et de perdre totalement le fil. De plus, le balisage de la page de détails des cookies rend impossible la compréhension sans les CSS : on ne sait pas à quel type de cookie la liste affichée correspond.

En bref

Beaucoup d’autres outils existent pour gérer les cookies de son site. Malheureusement, nous n’en avons trouvé aucun de suffisamment accessible aux personnes en situation de handicap. Les problèmes sont souvent les mêmes : navigation au clavier difficile voire impossible, boite de dialogue mal implémentée au niveau HTML, informations importantes non restituées dans un lecteur d’écran…

On remarque que le seul outil présent sur le marché de façon assez significative et ayant une accessibilité acceptable est open-source. C’est une réelle force : sans cette ouverture, tarteaucitron.js n’aurait pas gagné en accessibilité.

Notre proposition : Orejime ?

Chez Empreinte Digitale, nous avions besoin d’un outil de gestion de cookies respectant deux critères particuliers :

1. être accessible
2. être réutilisable facilement d’un projet à l’autre

tarteaucitron.js est un très beau projet mais ne correspond pas totalement à nos besoins de réutilisation. Nous avons donc préféré contribuer à Klaro!, un projet finalement très similaire à tarteaucitron.js. La différence majeure entre les deux est que Klaro! est codé avec une base de code ES6/React, ce qui correspond bien à notre environnement de travail chez Empreinte Digitale.

Au fil des contributions pour rendre Klaro! plus accessible et plus réutilisable, nous nous sommes rendus compte que nos besoins étaient là encore différents et nous avons finalement « forké » le projet pour créer Orejime ? (à prononcer « Au régime »).

En maintenant notre propre fork, nous nous assurons que l’accessibilité de l’outil sera toujours une priorité.

Une démo du projet est disponible en ligne, et la documentation est visible directement sur GitHub. Vos retours et contributions sont bienvenus.