Bandeau cookies sur mobile : mise en page, zones tactiles et accessibilité

Sur un téléphone, un bandeau cookies doit être un court panneau en bas de l’écran, pas un mur plein écran : un texte de deux ou trois lignes, « Tout accepter » et « Tout refuser » côte à côte ou empilés à la même taille, et « Personnaliser » juste en dessous, le tout à portée de pouce. Selon les WCAG 2.2, chaque bouton a besoin d’une zone tactile d’au moins 24 sur 24 pixels CSS, et 44 sur 44 est la taille confortable. Le bandeau ne doit pas masquer l’élément qui a le focus clavier, doit fonctionner quand le visiteur agrandit le texte, et doit laisser la page lisible derrière lui. L’essentiel du trafic de consentement est mobile, donc c’est là que se joue la conception du choix.

Pourquoi le mobile est-il plus difficile ?

La place. Un bandeau qui occupe un cinquième d’un écran d’ordinateur portable peut couvrir tout l’écran d’un téléphone. Les designers coupent alors le texte, rapetissent le bouton Refuser ou le cachent derrière « Paramètres », et le résultat enfreint la règle que les autorités européennes appliquent partout : refuser doit être aussi simple qu’accepter. La task force « bandeaux cookies » du CEPD a conclu qu’un bandeau avec un bouton d’acceptation et sans option de refus au même niveau constitue une infraction pour une grande majorité des autorités, et une option de refus techniquement présente mais minuscule ou hors de l’écran appelle le même constat.

Quelle mise en page fonctionne sur téléphone ?

La documentation Search de Google sur les interstitiels intrusifs exempte les interstitiels affichés en raison d’une obligation légale, mais recommande tout de même des bandeaux qui occupent une petite partie de l’écran plutôt que des interstitiels pleine page, et déconseille de rediriger chaque URL vers une page de consentement. Un panneau en bas permet aussi aux visiteurs de voir ce sur quoi ils se prononcent.

Comment disposer les boutons ?

• Un poids égal. « Tout accepter » et « Tout refuser » avec la même taille, la même forme, la même graisse et un contraste lisible. Si l’un est plein, les deux le sont, ou les deux sont en contour. Voir le guide du bouton Tout refuser.
• Côte à côte ou empilés. Deux boutons de même largeur côte à côte tiennent sur la plupart des téléphones en anglais ; en allemand ou en français, les libellés doivent souvent être empilés. Empilez-les à la même largeur plutôt que de réduire le texte.
• À portée de pouce. Le bas de l’écran est la zone la plus facile à atteindre d’une main. Un panneau en bas y place naturellement les boutons.
• Personnaliser comme troisième option. Un bouton texte ou un bouton secondaire sous la paire principale ouvre les préférences.
• Pas de croix de fermeture qui vaut acceptation. S’il y a une commande de fermeture, elle doit soit être absente, soit valoir refus, et le texte ne doit pas suggérer le contraire.

Quelle taille pour les zones tactiles ?

Le critère de succès 2.5.8 des WCAG 2.2, Taille de la cible (minimum), au niveau AA, exige des cibles de pointeur d’au moins 24 sur 24 pixels CSS, sauf si des cibles plus petites sont espacées de sorte qu’un cercle de 24 pixels autour de chacune ne touche aucune autre cible. Le critère 2.5.5, Taille de la cible (amélioré), au niveau AAA, demande 44 sur 44 pixels CSS. Utilisez 44 pixels de hauteur pour les boutons principaux et au moins 8 pixels entre eux ; les interrupteurs du panneau de préférences demandent le même soin, y compris un libellé sur lequel on peut appuyer.

Quelles règles d’accessibilité comptent le plus sur mobile ?

• Focus non masqué. Le critère de succès 2.4.11 des WCAG 2.2 (AA) indique qu’un composant qui reçoit le focus clavier ne doit pas être entièrement masqué par du contenu créé par l’auteur. L’explication du W3C cite les bandeaux cookies fixes comme un échec typique, et liste des approches conformes : rendre le bandeau modal, ajouter un espacement de défilement (scroll padding) pour qu’il ne couvre pas le contenu, ou le fermer quand il perd le focus.
• Redistribution. Le critère 1.4.10 demande que le contenu fonctionne à une largeur de 320 pixels CSS sans défilement horizontal. Testez le bandeau à cette largeur avec de longues traductions.
• Agrandissement du texte. Quand le visiteur agrandit le texte dans les réglages du système, le bandeau doit grandir et défiler en interne plutôt que de pousser les boutons hors de l’écran.
• Lecteurs d’écran. Le bandeau a besoin d’un titre ou d’un libellé, de boutons qui sont de vrais boutons, et d’interrupteurs avec un nom et un état. Le guide du bandeau cookies accessible donne la checklist complète.

Combien de texte peut-on mettre ?

Environ 40 à 60 mots au premier niveau, soit deux à quatre lignes sur un téléphone. Nommez les finalités (« mesurer les visites », « afficher des publicités ») et les principaux partenaires, et mettez un lien vers la politique de cookies. Placez les détails, les descriptions des catégories et le tableau des cookies dans le panneau de préférences, qui peut occuper toute la hauteur et défiler. Les exemples de texte pour bandeau cookies proposent des versions courtes prêtes à l’emploi.

Le panneau de préférences sur téléphone

Ouvrez-le comme un panneau pleine hauteur avec son propre défilement, le bouton Enregistrer fixé en bas, et « Tout refuser » et « Tout accepter » répétés à cet endroit pour que les visiteurs n’aient pas à basculer chaque catégorie. Les catégories sont désactivées au départ. Repliez le tableau des cookies sous chaque catégorie pour que le panneau reste lisible.

Comment le tester ?

Utilisez de vrais appareils, pas seulement l’émulation d’appareils du navigateur : un petit téléphone Android, un iPhone avec encoche et une tablette. Vérifiez le mode portrait et le mode paysage, le texte système à 200 %, un lecteur d’écran (TalkBack ou VoiceOver), et le réseau le plus lent possible, car un bandeau qui apparaît tard et décale la mise en page provoque des appuis accidentels. Refaites ensuite le test DevTools de vérifier les cookies avant consentement en émulation mobile.

Utiliser un bandeau prêt à l’emploi

Le bandeau de Cookiequiet propose trois mises en page (barre, boîte flottante et fenêtre modale centrée), avec « Tout accepter » et « Tout refuser » de même taille et de même graisse au premier écran, la prise en charge du clavier et des lecteurs d’écran, et un rendu dans un shadow root pour que le CSS du site ne puisse pas le casser. L’installation tient en une balise script avant vos autres scripts, avec « Tout refuser » activé par défaut, soit environ cinq minutes entre l’inscription et un bandeau en ligne ; l’offre gratuite couvre un site avec des pages vues illimitées.