Afficher un chatbot sur mobile : taille, clavier, encoche

Sur mobile, un chatbot pose trois problèmes qu'on ne voit pas sur ordinateur. La bulle peut cacher un bouton important. Le clavier peut recouvrir le champ de saisie. Et l'encoche ou les bords arrondis du téléphone peuvent couper le bas de la fenêtre. Ces points se règlent en partie dans l'outil du chatbot, en partie dans le site. Dans tous les cas, ils se vérifient sur de vrais téléphones.

Les références citées ici, lues le 15/11/2026, sont la documentation de Google Search Central, les règles WCAG 2.2 du W3C et la documentation MDN.

1. Ne rien masquer

Google, dans sa page sur les fenêtres intrusives, décrit les éléments qui « obstruent la vue du contenu » et explique qu'interrompre les visiteurs peut les frustrer et entamer leur confiance. Il ajoute que ces fenêtres rendent le contenu plus difficile à comprendre pour les moteurs, ce qui peut nuire aux performances dans la recherche. Il recommande des bandeaux qui n'occupent qu'une petite partie de l'écran.

Pour un chatbot sur mobile :

• pas d'ouverture automatique en plein écran : laissez le visiteur ouvrir la fenêtre ;
• une bulle discrète, qui ne recouvre ni le bouton d'achat, ni le lien « Gérer mes cookies », ni la navigation du bas ;
• un message d'invitation court, s'il y en a un, qui se ferme facilement.

Les règles WCAG 2.2 vont dans le même sens : le critère 2.4.11 (niveau AA) demande qu'un élément qui a le focus ne soit pas entièrement caché par un contenu ajouté par l'auteur du site. Une bulle placée sur un bouton peut le faire échouer.

2. Des cibles assez grandes

Le critère 2.5.8 « Taille de la cible (minimum) » des WCAG 2.2, niveau AA, demande que les cibles de pointage mesurent au moins 24 × 24 pixels CSS. Les exceptions prévues : un espacement suffisant entre les cibles trop petites, une autre commande équivalente sur la page, une cible dans une phrase, une taille fixée par le navigateur, ou une présentation essentielle ou imposée par la loi.

À vérifier sur la bulle, sur le bouton de fermeture de la fenêtre, sur le bouton d'envoi et sur les suggestions de questions.

3. Le clavier qui recouvre le champ

Quand le visiteur touche le champ de saisie, le clavier du téléphone s'ouvre. Selon le réglage du site, il peut recouvrir la zone où l'on écrit. La balise meta viewport prévoit pour cela la clé interactive-widget, qui fixe l'effet des éléments comme le clavier virtuel sur la page. MDN décrit trois valeurs :

Ce réglage concerne tout le site, pas seulement le chat : ne le changez pas sans tester les autres formulaires. Testez la fenêtre de chat sur un téléphone Android et sur un iPhone, champ de saisie actif, en écrivant un long message.

4. L'encoche et les bords arrondis

Sur les téléphones à encoche ou à coins arrondis, le bas de l'écran peut couper un bouton placé tout en bas. MDN décrit les variables env(safe-area-inset-*), qui donnent la distance de sécurité de chaque bord, et un exemple de pied de page fixe :

.ma-barre-fixe {
  position: sticky;
  bottom: 0;
  padding: 1em 1em calc(1em + env(safe-area-inset-bottom));
}

MDN précise aussi que la valeur viewport-fit=cover de la balise viewport fait occuper tout l'écran à la page, et recommande alors fortement d'utiliser ces variables pour que le contenu important ne sorte pas de la zone visible. Si le widget est fourni par un éditeur, c'est à lui de gérer ces marges à l'intérieur de la fenêtre ; vérifiez-le sur un téléphone récent.

5. Ne pas bloquer le zoom

Certains sites désactivent le zoom (user-scalable=no ou maximum-scale bas dans la balise viewport). MDN prévient que cela empêche les personnes malvoyantes de lire le contenu, et rappelle que les WCAG demandent un agrandissement d'au moins deux fois. Une fenêtre de chat au texte petit devient alors illisible. Laissez le zoom actif, et vérifiez à 200 % que la fenêtre reste utilisable (critère 1.4.4), puis sur une largeur de 320 pixels CSS sans défilement horizontal (critère 1.4.10).

Le cadre légal

Ces tests rejoignent les exigences d'accessibilité qui peuvent s'appliquer au site du client. La page de Collabor-IA sur l'obligation d'accessibilité d'un site d'entreprise aide à savoir si le client est concerné. Les tests complets du widget sont sur les tests d'accessibilité d'un chatbot.

Liste de contrôle mobile

1. Fenêtre fermée à l'arrivée ; ouverture à la demande du visiteur.
2. Bulle qui ne recouvre aucun bouton ni le lien « Gérer mes cookies ».
3. Cibles d'au moins 24 × 24 pixels CSS, bouton de fermeture compris.
4. Champ de saisie visible clavier ouvert, sur Android et sur iPhone.
5. Bas de la fenêtre lisible sur un téléphone à encoche.
6. Zoom actif ; fenêtre utilisable à 200 % et sur 320 pixels de large.
7. Liens de l'assistant qui s'ouvrent correctement sur mobile.