{"id":45392,"date":"2021-04-06T10:07:18","date_gmt":"2021-04-06T08:07:18","guid":{"rendered":"https:\/\/kinsta.com\/?p=92617&preview=true&preview_id=92617"},"modified":"2023-10-27T10:41:27","modified_gmt":"2023-10-27T09:41:27","slug":"corriger-erreur-clickable-elements-too-close-together","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/corriger-erreur-clickable-elements-too-close-together\/","title":{"rendered":"Comment corriger l’erreur \u00ab Clickable elements too close together \u00bb (3 m\u00e9thodes)"},"content":{"rendered":"

Les probl\u00e8mes d’ergonomie mobile non r\u00e9solus peuvent avoir un impact important sur le trafic de votre site web. Un probl\u00e8me courant dont Google Search Console<\/a> peut vous avertir est l’erreur \u00ab\u00a0\u00c9l\u00e9ments cliquables trop proches\u00a0\u00bb, qui signifie probablement que la navigation sur votre site est complexe pour les utilisateurs mobiles.<\/p>\n

Plus de 4,32 milliards de personnes<\/a> acc\u00e8dent \u00e0 l’internet depuis leurs appareils mobiles. Il est donc crucial de r\u00e9soudre le plus rapidement possible cette erreur d’\u00e9l\u00e9ments cliquables. Heureusement, il existe plusieurs fa\u00e7ons de le faire et de rendre votre site web plus adapt\u00e9 aux mobiles.<\/p>\n

Dans cet article, nous expliquons ce qu’est le probl\u00e8me des \u00ab\u00a0\u00e9l\u00e9ments cliquables trop proches\u00a0\u00bb, nous expliquons pourquoi il se produit et nous vous indiquons trois m\u00e9thodes que vous pouvez utiliser pour le r\u00e9soudre. Nous expliquerons \u00e9galement ce qu’est l’erreur \u00ab\u00a0Contenu plus large que l’\u00e9cran\u00a0\u00bb et comment vous pouvez la r\u00e9soudre.<\/p>\n

Mettons-nous au travail !<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Qu’est-ce que l’erreur \u00ab Clickable elements too close together \u00bb ?<\/h2>\n

En un mot, les erreurs d’ergonomie mobile peuvent rendre votre site WordPress inaccessible<\/a> et plus difficile \u00e0 parcourir pour les utilisateurs mobiles. Vous pouvez utiliser le rapport sur l\u2019ergonomie mobile<\/a> de Google Search Console pour tester votre site.L’outil de rapport sur l\u2019ergonomie mobile de Google Search Console<\/p>\n

\n

\"L'outil
L’outil de rapport sur l\u2019ergonomie mobile de Google Search Console<\/figcaption><\/figure><\/figure>\n

Il existe six principaux types de probl\u00e8mes d’ergonomie mobile que vous pouvez rencontrer :<\/p>\n

    \n
  1. Utilise des extensions incompatibles<\/li>\n
  2. Fen\u00eatre d\u2019affichage non configur\u00e9e<\/li>\n
  3. Fen\u00eatre d’affichage non configur\u00e9e sur \u00ab\u00a0device-width\u00a0\u00bb.<\/li>\n
  4. Texte illisible car trop petit<\/li>\n
  5. Contenu plus large que l’\u00e9cran<\/li>\n
  6. \u00c9l\u00e9ments cliquables trop rapproch\u00e9s<\/li>\n<\/ol>\n

    Dans le cadre de ce rapport, Google Search Console v\u00e9rifiera tous les \u00e9l\u00e9ments cliquables de votre site, tels que les boutons et les liens. L’objectif est de v\u00e9rifier si les utilisateurs mobiles peuvent interagir confortablement avec les \u00e9l\u00e9ments de votre site web en utilisant uniquement le toucher, plut\u00f4t que le clavier ou la souris.<\/p>\n

    Si Google Search Console d\u00e9termine que vos \u00e9l\u00e9ments cliquables posent un probl\u00e8me aux utilisateurs mobiles, il inclura l’erreur \u00ab\u00a0\u00c9l\u00e9ments cliquables trop proches\u00a0\u00bb dans votre rapport de synth\u00e8se.<\/p>\n

    \n

    \"Un
    Un rapport sur les probl\u00e8mes d’ergonomie mobile dans Google Search Console<\/figcaption><\/figure><\/figure>\n

    Si vous cliquez sur l’erreur, vous acc\u00e9dez \u00e0 la page de d\u00e9tails et d’\u00e9tat. Sur cet \u00e9cran, vous pouvez en savoir plus sur le probl\u00e8me, notamment sur les pages concern\u00e9es.<\/p>\n

    \n

    \"L'erreur
    L’erreur \u00ab \u00c9l\u00e9ments cliquables trop proches \u00bb de Google Search Console<\/figcaption><\/figure><\/figure>\n

    Essentiellement, l’erreur relative aux \u00e9l\u00e9ments cliquables est un avertissement indiquant que les \u00e9l\u00e9ments cliquables de votre site WordPress sont trop petits pour que les utilisateurs mobiles puissent interagir confortablement avec eux.<\/p>\n

    Il se peut aussi qu’ils soient suffisamment grands, mais plac\u00e9s trop pr\u00e8s des \u00e9l\u00e9ments voisins. Si les boutons, liens et autres \u00e9l\u00e9ments cliquables sont trop proches les uns des autres, les utilisateurs risquent d’appuyer sur les mauvais \u00e9l\u00e9ments, ce qui nuit \u00e0 l’exp\u00e9rience utilisateur (UX).<\/p>\n

    Bien que le fait d’avoir des \u00e9l\u00e9ments cliquables trop proches les uns des autres soit consid\u00e9r\u00e9 comme une erreur d’ergonomie mobile, la r\u00e9solution de ce probl\u00e8me peut \u00e9galement am\u00e9liorer l’accessibilit\u00e9 de votre site<\/a>. Par exemple, les personnes ayant des probl\u00e8mes de dext\u00e9rit\u00e9 peuvent appr\u00e9cier un espace suppl\u00e9mentaire entre les \u00e9l\u00e9ments interactifs. \u00c0 l’inverse, les utilisateurs souffrant de probl\u00e8mes de vue peuvent trouver plus facile d’interagir avec des boutons et des liens larges et clairement d\u00e9finis.<\/p>\n\n

    Pourquoi l’erreur \u00ab Clickable elements too close together \u00bb peut-elle appara\u00eetre ?<\/h3>\n

    Plusieurs facteurs peuvent \u00eatre \u00e0 l’origine du probl\u00e8me \u00ab\u00a0\u00c9l\u00e9ments cliquables trop proches\u00a0\u00bb. Parfois, c’est simplement parce que Google n’a pas pu demander les ressources n\u00e9cessaires lors du rendu. Si c’est le cas, vous pouvez essayer d’utiliser le test de compatibilit\u00e9 avec les mobiles<\/a> et voir si le probl\u00e8me est r\u00e9solu. Si c’est le cas, vous pouvez probablement l’ignorer.<\/p>\n

    Ce probl\u00e8me peut \u00e9galement r\u00e9sulter de la conception de votre<\/a> site<\/a>. Par exemple, si vous essayez de condenser trop d’\u00e9l\u00e9ments interactifs sur une seule page web, vous risquez de voir appara\u00eetre cette erreur d’ergonomie mobile.<\/p>\n

    Une autre raison de l’erreur des \u00e9l\u00e9ments cliquables est qu’il y a un probl\u00e8me avec la r\u00e9activit\u00e9 mobile<\/a> de la conception de votre site. Votre site web doit \u00eatre flexible et s’adapter automatiquement \u00e0 l’appareil sp\u00e9cifique du visiteur pour offrir la meilleure exp\u00e9rience utilisateur possible. Cependant, si votre site n’est pas responsive, cela peut entra\u00eener des probl\u00e8mes d\u2019ergonomie.<\/p>\n

    Plus pr\u00e9cis\u00e9ment, si votre site web n’est pas responsive, certaines de ses parties peuvent appara\u00eetre \u00e9tir\u00e9es, r\u00e9tr\u00e9cies ou d\u00e9form\u00e9es sur certains \u00e9crans. Sur les appareils dot\u00e9s d’un \u00e9cran plus petit, les \u00e9l\u00e9ments que l’on peut toucher peuvent appara\u00eetre \u00e0 l’\u00e9troit ou d\u00e9form\u00e9s.<\/p>\n

    L’identification de certaines des raisons standard et potentielles de l’apparition de cette erreur peut vous aider \u00e0 mieux comprendre pourquoi votre site rencontre des probl\u00e8mes d’ergonomie mobile. Cela vous aidera \u00e9galement \u00e0 d\u00e9terminer comment r\u00e9soudre le probl\u00e8me.<\/p>\n

    Comment corriger l’erreur \u00ab Clickable elements too close together \u00bb (3 m\u00e9thodes)<\/h2>\n

    Si les utilisateurs mobiles ont du mal \u00e0 naviguer sur votre site, qu’est-ce qui les emp\u00eache de s’en aller<\/em> ? Il est essentiel de pr\u00e9venir ce probl\u00e8me pour r\u00e9soudre aussi rapidement que possible tous les probl\u00e8mes d’ergonomie mobile. Jetons un coup d’\u0153il \u00e0 trois m\u00e9thodes que vous pouvez utiliser pour corriger l’erreur \u00ab \u00c9l\u00e9ments cliquables trop proches \u00bb et offrir une meilleure UX \u00e0 vos utilisateurs mobiles.<\/p>\n

    1. Utiliser l\u2019extension WordPress YellowPencil Visual Customizer<\/h3>\n

    YellowPencil Visual Customizer<\/a> est une extension WordPress<\/a> sur l\u2019interface publique qui vous permet de modifier les fichiers CSS et les fichiers de th\u00e8me de votre site web sans code.<\/p>\n

    \n

    \"L\u2019extension
    L\u2019extension WordPress YellowPencil Visual Customizer<\/figcaption><\/figure><\/figure>\n

    Cette extension est pratique pour modifier la taille de vos cibles cliquables, par exemple pour agrandir vos boutons. Vous pouvez \u00e9galement cr\u00e9er plus d’espace entre les \u00e9l\u00e9ments cliquables en modifiant les marges et l’espacement entre eux.<\/p>\n

    Vous pouvez t\u00e9l\u00e9charger gratuitement l\u2019extension YellowPencil ou acheter une licence r\u00e9guli\u00e8re ou \u00e9tendue<\/a>. Pour l’utiliser, installez-la et activez-la sur votre site WordPress en allant dans Extensions<\/strong> > Ajouter<\/strong>, en recherchant l\u2019extension, puis en cliquant sur Installer<\/strong> > Activer<\/strong>.<\/p>\n

    \n

    \"L'option
    L’option pour installer l\u2019extension YellowPencil dans WordPress<\/figcaption><\/figure><\/figure>\n

    Ensuite, allez dans YellowPencil<\/strong> > Personnalisations<\/strong>. Sous l’onglet Personnalisations<\/strong>, s\u00e9lectionnez Commen\u00e7ons<\/strong> !<\/p>\n

    \n

    \"La
    La page \u00ab Personnalisations \u00bb de l\u2019extension WordPress YellowPencil<\/figcaption><\/figure><\/figure>\n

    L’interface de la personnalisation visuelle se chargera et vous invitera \u00e0 s\u00e9lectionner la page qui d\u00e9clenche l’erreur d’ergonomie mobile.<\/p>\n

    \n

    \"L'interface
    L’interface de l\u2019extension YellowPencil Visual Customizer<\/figcaption><\/figure><\/figure>\n

    Vous pouvez appliquer vos modifications sur cette page sp\u00e9cifique ou sur l’ensemble de votre site web. Si de nombreuses pages pr\u00e9sentent l’erreur des \u00e9l\u00e9ments cliquables, il est pr\u00e9f\u00e9rable de s\u00e9lectionner Global<\/strong>.<\/p>\n

    Faites votre s\u00e9lection, puis cliquez sur Continuer<\/strong>. Vous pouvez maintenant parcourir votre page web, en s\u00e9lectionnant chaque \u00e9l\u00e9ment pouvant \u00eatre touch\u00e9. YellowPencil affichera un panneau d’options d’\u00e9dition pour cet \u00e9l\u00e9ment.<\/p>\n

    \n

    \"Options
    Options CSS de la personnalisation visuelle de YellowPencil pour les \u00e9l\u00e9ments cliquables<\/figcaption><\/figure><\/figure>\n

    Par exemple, dans la capture d’\u00e9cran ci-dessous, nous avons s\u00e9lectionn\u00e9 Padding<\/strong> et ajout\u00e9 10 pixels sur tous les c\u00f4t\u00e9s pour augmenter l’espace entre les cibles :<\/p>\n

    \n

    \"Les
    Les r\u00e9glages de marge int\u00e9rieure dans la personnalisation visuelle de l\u2019extension YellowPencil<\/figcaption><\/figure><\/figure>\n

    Les r\u00e9glages Taille<\/strong> et Position<\/strong> permettent \u00e9galement de r\u00e9soudre l’erreur \u00ab\u00a0\u00c9l\u00e9ments cliquables trop proches\u00a0\u00bb. Bien que cela ne soit pas n\u00e9cessaire, si vous souhaitez modifier directement le code CSS, vous pouvez le faire via le panneau de gauche.<\/p>\n

    Vous pouvez ensuite passer \u00e0 l’\u00e9l\u00e9ment suivant qui pose des probl\u00e8mes d’ergonomie mobile et r\u00e9p\u00e9ter le processus. Lorsque vous \u00eates satisfait de vos modifications, cliquez sur le bouton vert Enregistrer<\/strong>.<\/p>\n

    2. Assurez-vous que toutes les cibles mesurent au moins 48 px.<\/h3>\n

    Il est impossible de cr\u00e9er un design unique et statique qui soit beau et fonctionne correctement sur tous les appareils. Il est pr\u00e9f\u00e9rable de cr\u00e9er une mise en page flexible <\/em>en d\u00e9finissant toutes les cibles tactiles \u00e0 l’aide de pixels ind\u00e9pendants de l’appareil (dpi). Les \u00e9l\u00e9ments d\u00e9finis \u00e0 l’aide de dpi peuvent \u00eatre automatiquement mis \u00e0 l’\u00e9chelle en fonction de la taille de l’\u00e9cran de l’utilisateur.<\/p>\n

    Sur un appareil mobile, la cible tactile minimale recommand\u00e9e est de 48\u00d748 pixels<\/a>. Cela \u00e9quivaut \u00e0 environ 9 mm, ce qui est suffisant pour le doigt d’une personne moyenne.<\/p>\n

    Par cons\u00e9quent, si vous avez du mal \u00e0 d\u00e9terminer exactement quels \u00e9l\u00e9ments sont \u00e0 l’origine du probl\u00e8me, il peut \u00eatre utile d’examiner le nombre de dpi de chaque \u00e9l\u00e9ment. S’il est inf\u00e9rieur \u00e0 l’objectif tactile recommand\u00e9 (24px, par exemple), vous pouvez augmenter la marge int\u00e9rieure (padding) pour la porter \u00e0 48px.<\/p>\n

    Vous pouvez v\u00e9rifier la valeur calcul\u00e9e d’une zone modifiable \u00e0 l’aide de Chrome DevTools<\/a> ou de Firefox DevTools<\/a>, selon le navigateur que vous pr\u00e9f\u00e9rez<\/a>. Nous allons utiliser Chrome \u00e0 titre d’exemple.<\/p>\n

    Pour v\u00e9rifier la valeur dpi de l’un des \u00e9l\u00e9ments cliquables de votre site WordPress, ouvrez-le dans un onglet du navigateur Chrome et acc\u00e9dez \u00e0 la page pr\u00e9sentant l’erreur \u00ab\u00a0\u00c9l\u00e9ments cliquables trop proches\u00a0\u00bb. Faites un clic droit sur la page et s\u00e9lectionnez Inspecter<\/strong>.<\/p>\n

    \n

    \"L'option
    L’option \u00ab Inspecter \u00bb dans le navigateur Chrome<\/figcaption><\/figure><\/figure>\n

    En cliquant sur Inspecter<\/strong>, vous ouvrirez Chrome DevTools. Dans la partie sup\u00e9rieure, cliquez sur l’ic\u00f4ne affichant les appareils mobiles, ce qui vous am\u00e8nera \u00e0 l’\u00e9cran de la barre d’outils \u00ab\u00a0Toggle device toolbar<\/strong>\u00a0\u00bb.<\/p>\n

    \n

    \"L'option
    L’option \u00ab Toggle device toolbar \u00bb dans Chrome DevTools<\/figcaption><\/figure><\/figure>\n

    Dans le panneau d’aper\u00e7u de gauche, vous verrez une \u00e9mulation de votre site sur un appareil mobile. Si vous survolez et cliquez sur n’importe quel \u00e9l\u00e9ment pouvant \u00eatre touch\u00e9, vous pouvez voir la valeur calcul\u00e9e \u00e0 droite :<\/p>\n

    \n

    \"La
    La console DevTools de Google Chrome<\/figcaption><\/figure><\/figure>\n

    Si n\u00e9cessaire, vous pouvez ensuite ajuster la taille d’un \u00e9l\u00e9ment en modifiant directement vos fichiers CSS<\/a> et de site ou en utilisant une extension telle que YellowPencil.<\/p>\n

    3. V\u00e9rifiez la m\u00e9thode de saisie<\/h3>\n

    Si vous essayez de corriger l’erreur \u00ab\u00a0\u00c9l\u00e9ments cliquables trop proches\u00a0\u00bb, il peut \u00eatre utile de v\u00e9rifier la m\u00e9thode de saisie<\/a>. Il s’agit de la m\u00e9thode ou du p\u00e9riph\u00e9rique qu’un utilisateur utilise pour afficher et interagir avec votre site. Plus pr\u00e9cis\u00e9ment, vous pouvez voir s’ils utilisent un smartphone, une tablette ou d’autres appareils.<\/p>\n

    Par exemple, le toucher est consid\u00e9r\u00e9 comme une m\u00e9thode de saisie impr\u00e9cise. Comme nous venons de le voir, l’utilisation de CSS pour augmenter la taille de vos cibles tactiles ou ajouter une marge int\u00e9rieure suppl\u00e9mentaire peut faciliter l’utilisation des cibles tactiles par les visiteurs qui utilisent des dispositifs tactiles pour interagir avec votre site web.<\/p>\n

    Cependant, d\u00e9terminer le p\u00e9riph\u00e9rique d’un utilisateur n’est pas une science exacte. Cette technique utilise ce que l’on appelle le \u00ab\u00a0pointeur\u00a0\u00bb pour v\u00e9rifier la m\u00e9thode de saisie principale de l’utilisateur, qui peut avoir l’une des deux valeurs suivantes :<\/p>\n