Aller au contenu
Mera News

Guide de l'éditeur, chapitre 3

Fenêtres contextuelles et consentement

Dernière révision : novembre 2026

Chaque boîte qui s'affiche par-dessus un article se dresse entre le lecteur et la raison de sa venue. Certaines sont exigées par la loi. Beaucoup ne le sont pas. Ce chapitre présente ce que demande Google, ce que les autorités européennes ont dit du consentement, et comment construire une invite qui fonctionne au clavier et avec un lecteur d'écran. Il ne constitue pas un conseil juridique : faites vérifier votre bandeau par votre propre conseil.

Ce que demande Google

Google décrit les interstitiels intrusifs comme des éléments de page qui bloquent la vue du contenu, et prévient qu'ils peuvent nuire aux performances dans la recherche. Ses consignes sont précises :

  • Ne couvrez pas toute la page.
  • N'envoyez pas le lecteur vers une page distincte pour le consentement ou une saisie. Si chaque URL redirige vers une même page de consentement, toutes sauf celle-ci peuvent disparaître des résultats de recherche.
  • Préférez des bandeaux qui n'occupent qu'une petite fraction de l'écran aux interstitiels plein écran.
  • Appliquez la même prudence à toutes les fenêtres promotionnelles, y compris les invitations à la newsletter et à l'installation d'une application.

Pour l'installation d'une application, Google renvoie aux options prises en charge par les navigateurs, comme les Smart App Banners de Safari, ou à un simple bandeau HTML qui mène à la bonne boutique.

Les interstitiels exigés par la loi sont exemptés de ces consignes. Google cite les contrôles d'âge en exemple. Si vous en avez besoin, gardez le contenu dans la page sous la superposition, afin qu'il reste indexable.

Les Better Ads Standards portent sur la publicité. Les publicités pop-up y figurent sur ordinateur comme sur mobile. Sur mobile, les publicités prestitielles figurent avec ou sans compte à rebours. Sur ordinateur, le format retenu est la prestitielle avec compte à rebours, et celle qui peut être fermée immédiatement ne passe pas sous la norme.

Ce que les autorités européennes ont dit du consentement

Le Comité européen de la protection des données (CEPD) a publié des lignes directrices sur le consentement et un rapport de sa task force sur les bandeaux de cookies. Le rapport de la task force consigne un seuil minimal convenu pour le traitement des plaintes, et les règles nationales continuent de s'appliquer : voyez ces points comme une base.

  • Rien de ce qui exige le consentement ne s'exécute d'abord. Les cookies soumis au consentement ne peuvent être déposés avant que le lecteur ait accepté par un acte positif.
  • Faire défiler n'est pas consentir. Les lignes directrices indiquent que faire défiler ou glisser ne constitue en aucun cas un acte clair et positif.
  • Les cases pré-cochées ne valent pas consentement. Il en va de même du silence, ou du simple fait de continuer à utiliser le service.
  • Proposez un moyen de refuser. Une grande majorité des autorités de la task force considérait comme une infraction un bandeau sans option de refus sur chaque niveau qui comporte un bouton de consentement.
  • Ne cachez pas le refus. Un lien de refus enfoui dans un paragraphe, sans rien pour attirer l'attention, ne conduit pas à un consentement valide. Les couleurs et le contraste des boutons sont évalués au cas par cas.
  • L'accès ne peut pas dépendre de l'acceptation. Les lignes directrices donnent en exemple de consentement qui n'est pas donné librement une page qui bloque tout le contenu tant que le lecteur n'a pas cliqué sur « Accepter les cookies ».
  • Retirer son consentement doit être aussi simple que le donner. Si le consentement a demandé un clic, le retirer doit en demander un aussi. Un lien permanent placé à un endroit visible et habituel est une option, et la task force mentionne aussi une petite icône.

Construire une invite utilisable par tous

Un bandeau qui ne bloque pas la page

Un petit bandeau laisse le lecteur poursuivre, ce que Google préfère. Il doit tout de même respecter WCAG 2.2. Le critère de succès 2.4.11, Focus non masqué (minimum), n'est pas satisfait si un bandeau fixe cache entièrement l'élément qui a le focus clavier. Ajoutez un scroll padding égal à la hauteur du bandeau :

html {
  scroll-padding-bottom: 96px; /* the banner's height */
}

Superposez le bandeau, ou réservez son espace, pour qu'il ne repousse pas l'article et n'ajoute pas de décalage de mise en page.

Une boîte de dialogue modale

Si l'invite doit arrêter le lecteur, construisez-la comme une vraie boîte de dialogue modale selon le modèle du W3C.

<div role="dialog" aria-modal="true"
     aria-labelledby="consent-title" aria-describedby="consent-text">
  <h2 id="consent-title">Your privacy choices</h2>
  <p id="consent-text">Choose whether this site may use cookies for advertising.</p>
  <button type="button">Reject all</button>
  <button type="button">Accept all</button>
  <button type="button">Choose settings</button>
</div>
  • Déplacez le focus dans la boîte de dialogue à son ouverture.
  • Tab et Maj + Tab parcourent les contrôles de la boîte de dialogue et reviennent au début ou à la fin.
  • Échap ferme la boîte de dialogue. Considérez cela comme l'absence de choix, jamais comme une acceptation.
  • À la fermeture, rendez le focus à l'élément qui l'a ouverte. Si elle s'est ouverte au chargement de la page, placez le focus au début du contenu.

Sur mobile

  • Ancrez le bandeau en bas de l'écran et gardez le titre visible au-dessus.
  • Empilez les boutons sur toute la largeur pour qu'ils soient faciles à toucher, avec Accepter et Refuser à la même taille.
  • Gardez un texte court et reportez le détail sur un second niveau.
  • Vérifiez la mise en page à 320 pixels CSS de large et avec le texte agrandi à 200 %. Les boutons doivent rester accessibles sans défilement horizontal.

Sur ordinateur

  • Utilisez une barre en bas ou un panneau dans un coin, et laissez l'article dégagé.
  • Rendez chaque contrôle utilisable au clavier, avec un indicateur de focus visible.
  • Gardez un rapport de contraste d'au moins 4,5:1 pour le texte, ou 3:1 pour le grand texte.

Liste de contrôle

  • Chargez votre page d'accueil et un article avec un profil de navigateur neuf, sur un téléphone et sur un ordinateur. Comptez ce qui apparaît par-dessus le contenu.
  • Retirez toute superposition plein écran que la loi n'exige pas.
  • Retirez toute redirection vers une page de consentement distincte.
  • Confirmez qu'aucune balise soumise au consentement ne se déclenche avant l'accord du lecteur.
  • Placez une option de refus partout où il y a une option d'acceptation, sous forme d'un bouton de même poids.
  • Retirez les cases pré-cochées et toute logique qui compte le défilement comme un consentement.
  • Ajoutez sur chaque page un lien permanent ou une icône pour modifier les choix de confidentialité.
  • Parcourez le bandeau avec Tab, sans souris, et confirmez que le focus reste visible et ne disparaît jamais derrière lui.
  • Testez une boîte de dialogue modale avec un lecteur d'écran, y compris Échap et le retour du focus.
  • Remplacez les fenêtres personnalisées d'installation d'application par un petit bandeau.

Sources