« La taille de la cible des entrées par pointeur est d’au moins 24 par 24 pixels CSS, sauf lorsque : » constitue l’intégralité du critère de succès 2.5.8, Taille de la cible (minimum), avant le début de ses exceptions.1 Il relève du niveau AA dans les WCAG 2.2, la recommandation du W3C du 12 décembre 2024, et comporte cinq exceptions.1 L’une d’elles, l’exception « En ligne », décide de la manière dont la règle s’applique à une publicité placée dans une phrase.2 Avant l’exception se pose un problème plus simple : le pointeur qu’un lecteur sur téléphone utilise sur une page ne peut pas survoler.
Le survol est un événement d’ordinateur, et un téléphone n’en a pas
La page de MDN sur la caractéristique média hover indique qu’elle teste « si le mécanisme de saisie principal de l’utilisateur peut survoler des éléments ».3 Sa valeur « none » couvre un appareil qui « ne peut pas du tout survoler ou ne peut pas le faire commodément ».3 L’exemple donné est l’appareil portable : « de nombreux appareils mobiles émulent le survol lorsque l’utilisateur effectue un appui long peu commode », et c’est cette émulation que décrit « none ».3 Un lecteur sur ordinateur qui pose le pointeur sur un mot souligné envoie un événement qu’un téléphone n’a aucun moyen ordinaire d’envoyer.
Des mots déjà présents dans les articles d’un éditeur reçoivent un léger soulignement en pointillé, et le petit panneau qui s’ouvre à partir de ce soulignement est la bulle. Sur ordinateur, la bulle s’ouvre après un court délai de survol et se ferme quand la souris s’en éloigne ou avec la touche Échap ; au clavier, la touche Entrée sur le mot ayant le focus l’ouvre. Sur téléphone, le script d’intégration, adbubbles.js, donne au premier toucher le rôle du survol. Un toucher sur le mot souligné ouvre la bulle, et un toucher n’importe où à l’extérieur la ferme. Seul un second toucher, sur le lien qu’elle contient, suit ce lien. Le premier contact avec un mot publicitaire ouvre donc un panneau et ne peut pas faire quitter la page.
Ce qui quitte la page est le même sur tous les appareils. Le script d’intégration envoie trois balises de mesure. Un affichage est envoyé par chargement de page, une ouverture lorsqu’une bulle est restée visible une seconde, et un clic lorsqu’un lien est suivi. AdBubbles ne dépose aucun cookie, ne stocke aucun identifiant et ne collecte aucune donnée personnelle sur les lecteurs.
Apple et Google fixent un minimum plus élevé que le W3C
Les 24 pixels CSS des WCAG sont un minimum, et Apple et Google publient des chiffres plus élevés dans leurs propres unités. Les conseils de conception d’Apple demandent aux concepteurs de « créer des commandes mesurant au moins 44 points sur 44 points afin qu’elles puissent être touchées avec précision du doigt ».4 Les recommandations d’accessibilité d’Android de Google demandent au moins 48x48 dp par cible tactile.5 Elles ajoutent qu’« une cible tactile de 48x48 dp correspond à une taille physique d’environ 9 mm, quelle que soit la taille de l’écran ».5
Une étude a mesuré directement les pouces. Parhi, Karlson et Bederson ont testé vingt participants sur un appareil portable à écran tactile, dans une étude présentée à MobileHCI 2006.6 Les taux d’erreur ne présentaient plus de différence significative une fois qu’une cible à toucher une seule fois atteignait 9,6 mm.6 Les auteurs ont conclu que 9,2 mm pour les tâches à un seul toucher et 9,6 mm pour les séquences de touchers « devraient être suffisamment grands pour une utilisation au pouce d’une seule main sur des appareils portables à écran tactile ».6 Le chiffre d’environ 9 mm de Google se situe à moins d’un millimètre des deux.5
Un mot souligné dans une phrase est la cible que la norme exempte
L’exception « En ligne » est ainsi rédigée : « La cible se trouve dans une phrase ou sa taille est par ailleurs contrainte par la hauteur de ligne du texte qui n’est pas une cible. »1 Un mot souligné que marque le script d’intégration est du texte situé dans le paragraphe de l’éditeur, composé dans la police et la hauteur de ligne propres à l’éditeur. Le minimum de 24 pixels ne s’y applique pas.1 Le lien à l’intérieur de la bulle est différent : c’est une commande dans un panneau, affichée dans un Shadow DOM où le CSS de l’éditeur ne peut pas l’affecter. C’est le type de cible pour lequel le critère est écrit, et un audit d’accessibilité le mesure comme n’importe quelle autre commande.
« L’objectif de ce critère de succès est de contribuer à garantir que les cibles peuvent être facilement activées sans activer accidentellement une cible adjacente », indique le document explicatif.2 Les lecteurs qu’il cite sont « les utilisateurs ayant des limitations de dextérité et ceux qui ont des difficultés avec les mouvements fins ».2 C’est l’adjacence, et pas seulement la taille, que le W3C décrit comme le danger. Le script d’intégration ne place jamais deux bulles dans le même paragraphe, et il ignore les liens. Un mot publicitaire ne se trouve donc jamais à l’intérieur d’un lien qui a déjà une destination.
Voir à quoi cela ressemble sur un site donné ne coûte rien. Un compte éditeur et le script d’intégration ne coûtent rien à mettre en place, et les notes d’installation décrivent le réglage du périmètre et le maximum par page. Un site ajouté au compte indique lesquels de ses mots sont actuellement à vendre avant qu’aucune bulle ne soit diffusée.
Google traite déjà le toucher accidentel comme un problème de règles
Les règles de Google relatives à l’emplacement des annonces AdSense demandent aux éditeurs de « faire attention lorsqu’ils placent des liens, des boutons de lecture, des boutons de téléchargement ou des boutons de navigation près des annonces, car ils peuvent entraîner des clics accidentels ».7 Les Règles Google applicables aux éditeurs interdisent les annonces diffusées par Google qui « recouvrent des éléments de navigation ou d’autres éléments d’action, ou sont adjacentes à ceux-ci, et peuvent entraîner des interactions involontaires avec les annonces ».8 Les deux décrivent le toucher dont parle l’énoncé d’objectif du W3C : un toucher destiné à une cible qui atterrit sur une autre. Une page de règles peut seulement demander à un éditeur d’être prudent ; un format détermine ce que fait un premier toucher.
Le remède de Google pour les emplacements qui continuent de produire de tels clics est le clic confirmé. Sa page d’aide le décrit comme « une fonctionnalité de Google Ads qui ajoute une confirmation aux emplacements publicitaires susceptibles de générer des clics accidentels ».9 Un lecteur qui touche une telle annonce « sera invité à confirmer son intention de consulter la page de l’annonceur en cliquant sur un bouton associé à une action, comme “Visiter le site” ».9 Sur ces emplacements, Google ne considère plus un seul toucher comme une preuve d’intention, et en ajoute un autre après coup.
Une bulle comporte ce second toucher par conception plutôt que comme remède. Le premier toucher ouvre un panneau portant la mention « Ad » (publicité), un titre de quarante caractères au plus et un texte de quatre-vingt-dix caractères au plus. Le panneau contient aussi le domaine affiché de l’annonceur, un lien et une petite marque « Ads by AdBubbles ». Le second toucher, sur le lien, constitue le clic, et chaque lien d’une bulle porte rel="sponsored noopener".
Tout ce que le script d’intégration sait de ce second toucher, c’est qu’il a eu lieu. AdBubbles associe les mots des pages d’un éditeur à un annonceur qui les a achetés pour le mois. Les lecteurs qui voient une bulle sont ceux qui ouvrent la page, quels qu’ils soient ; le script d’intégration n’en suit aucun vers une autre page ou un autre site, et aucun résultat n’est promis à l’annonceur. Une balise de clic enregistre qu’un lien a été suivi, et rien sur la raison.
Un premier toucher ne peut pas agrandir un mot composé en petits caractères
L’exception « En ligne » signifie aussi que le mot souligné prend la taille que lui donne la typographie de l’éditeur. Supposons qu’un site compose ses paragraphes en 14 pixels avec une hauteur de ligne de 20 pixels sur téléphone. Le mot souligné n’est alors pas plus haut que sa ligne de 20 pixels, en dessous du minimum que le critère fixe pour les autres cibles. Il n’en est exempté que parce qu’il est en ligne. Rien dans l’exception ne change le pouce qui doit l’atteindre.
Le script d’intégration ajoute un soulignement en pointillé à un mot acheté et ne change rien d’autre à la typographie. Le mot reste dans la police de l’éditeur, à la hauteur de ligne fixée par le thème. Un éditeur dont les pages sont difficiles à toucher sur téléphone trouvera les mots soulignés aussi difficiles à toucher que les liens qui les entourent. Le périmètre et le maximum par page décident du nombre de mots soulignés que porte une page. Ni l’un ni l’autre ne rend un mot plus grand que les caractères dans lesquels il est composé.