{"id":44179,"date":"2022-07-04T13:50:30","date_gmt":"2022-07-04T12:50:30","guid":{"rendered":"https:\/\/kinsta.com\/dk\/?p=44179&preview=true&preview_id=44179"},"modified":"2023-08-24T11:34:55","modified_gmt":"2023-08-24T10:34:55","slug":"klikbare-elementer-er-for-taet-paa-hinanden","status":"publish","type":"post","link":"https:\/\/kinsta.com\/dk\/blog\/klikbare-elementer-er-for-taet-paa-hinanden\/","title":{"rendered":"S\u00e5dan rettes fejlen “Klikbare elementer er for t\u00e6t p\u00e5 hinanden” (3 metoder)"},"content":{"rendered":"

Ul\u00f8ste problemer med mobilanvendelighed kan have en betydelig indflydelse p\u00e5 din hjemmesides trafik. Et almindeligt problem, som Google Search Console<\/a> muligvis advarer dig om, er fejlen “Klikbare elementer er for t\u00e6t p\u00e5 hinanden”, hvilket sandsynligvis betyder, at dit websted er komplekst for mobilbrugere at navigere p\u00e5.<\/p>\n

Mere end 4,32 milliarder mennesker<\/a> f\u00e5r adgang til internettet fra deres mobile enheder. Derfor er det afg\u00f8rende at l\u00f8se denne klikbare elementfejl s\u00e5 hurtigt som muligt. Heldigvis er der flere m\u00e5der, du kan g\u00f8re det p\u00e5 og g\u00f8re dit websted mere mobilvenligt.<\/p>\n

I denne artikel forklarer vi, hvad problemet med “Klikbare elementer er for t\u00e6t p\u00e5 hinanden” er, diskuterer, hvorfor det sker, og guider dig gennem tre metoder, du kan bruge til at l\u00f8se det. Vi vil ogs\u00e5 forklare, hvad fejlen “Indhold bredere end sk\u00e6rm” er, og hvordan du kan l\u00f8se den.<\/p>\n

Lad os komme p\u00e5 arbejde!<\/p>\n

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

Foretr\u00e6kker du at se videoversionen<\/a>?<\/h3>\n

<\/kinsta-video><\/p>\n

Hvad fejlen “Klikbare elementer er for t\u00e6t p\u00e5 hinanden” er<\/h2>\n

I en n\u00f8ddeskal kan fejl i mobilanvendelighed g\u00f8re dit WordPress-websted utilg\u00e6ngeligt<\/a> og mere udfordrende for mobilbrugere at navigere p\u00e5. Du kan bruge Google Search Consoles rapport om mobilanvendelighed<\/a> til at teste dit websted.<\/p>\n

\n

\"V\u00e6rkt\u00f8jet
V\u00e6rkt\u00f8jet Google Search Console rapport om mobilanvendelighed<\/figcaption><\/figure><\/figure>\n

Der er seks hovedtyper af problemer med mobilanvendelighed, du kan st\u00f8de p\u00e5, som er:<\/p>\n

    \n
  1. Bruger inkompatible plugins<\/li>\n
  2. Viewport ikke indstillet<\/li>\n
  3. Viewport ikke indstillet til “enhedsbredde”<\/li>\n
  4. Teksten er for lille til at kunne l\u00e6ses<\/li>\n
  5. Indhold bredere end sk\u00e6rmen<\/li>\n
  6. Klikbare elementer er for t\u00e6t p\u00e5 hinanden<\/li>\n<\/ol>\n

    Som en del af denne rapport vil Google Search Console kontrollere alle dit websteds klikbare elementer, s\u00e5som knapper og links. Form\u00e5let med dette er at verificere, om mobilbrugere komfortabelt kan interagere med dit websteds elementer ved kun at bruge ber\u00f8ring, i stedet for at bruge et tastatur eller en mus.<\/p>\n

    Hvis Google Search Console fastsl\u00e5r, at dine klikbare elementer udg\u00f8r en udfordring for mobilbrugere, vil den inkludere fejlen “Klikbare elementer er for t\u00e6t p\u00e5 hinanden” i din oversigtsrapport.<\/p>\n

    \n

    \"En
    En rapport om problemer med mobilanvendelighed fra Google Search Console<\/figcaption><\/figure><\/figure>\n

    Hvis du klikker p\u00e5 fejlen, vil den bringe dig til siden med detaljer og status. P\u00e5 denne sk\u00e6rm kan du l\u00e6re mere om problemet, herunder de ber\u00f8rte sider.<\/p>\n

    \n

    \"Fejlen
    Fejlen “Klikbare elementer er for t\u00e6t p\u00e5 hinanden” i Google Search Console<\/figcaption><\/figure><\/figure>\n

    Grundl\u00e6ggende er fejlen med klikbare elementer en advarsel, der indikerer, at de klikbare elementer p\u00e5 dit WordPress-websted er for sm\u00e5 til, at mobilbrugere kan interagere komfortabelt med.<\/p>\n

    Alternativt kan det betyde, at de er store nok, men placeret for t\u00e6t p\u00e5 nabo-elementer. Hvis knapper, links og andre klikbare elementer klynger for t\u00e6t sammen, risikerer brugere at trykke p\u00e5 de forkerte, hvilket skader brugeroplevelsen (UX).<\/p>\n

    Selvom det at have klikbare elementer for t\u00e6t p\u00e5 hinanden er klassificeret som en fejl ved mobilanvendelighed, kan l\u00f8sning af dette problem ogs\u00e5 forbedre tilg\u00e6ngeligheden af \u200b\u200bdit websted<\/a>. For eksempel kan folk med problemer med fingerf\u00e6rdighed s\u00e6tte pris p\u00e5 lidt ekstra plads mellem interaktive elementer. I mods\u00e6tning hertil kan brugere med synsrelaterede problemer have lettere ved at interagere med store, klart definerede knapper og links.<\/p>\n\n

    Hvorfor fejlen “Klikbare elementer er for t\u00e6t p\u00e5 hinanden” vil vises<\/h3>\n

    Forskellige faktorer kan resultere i problemet “Klikbare elementer er for t\u00e6t p\u00e5 hinanden”. Nogle gange er det bare fordi Google ikke kunne anmode om de n\u00f8dvendige ressourcer under gengivelsen. Hvis det er tilf\u00e6ldet, s\u00e5 kan du pr\u00f8ve at bruge den mobilvenlige test<\/a> og se, om den best\u00e5r. Hvis det g\u00f8r, kan du sikkert ignorere det.<\/p>\n

    Dette problem kan ogs\u00e5 skyldes dit websteds design<\/a>. For eksempel, hvis du pr\u00f8ver at presse for mange interaktive elementer ind p\u00e5 en enkelt webside, kan du muligvis se denne mobilanvendelighedsfejl.<\/p>\n

    En anden grund til fejlen med klikbare elementer er, at der er et problem med mobilresponsen<\/a>\u00a0af \u200b\u200bdit websteds design. Din hjemmeside skal v\u00e6re fleksibel og automatisk tilpasse sig den bes\u00f8gendes specifikke enhed for at give den bedst mulige UX. Men hvis dit websted ikke er responsivt, kan det resultere i problemer med brugervenlighed.<\/p>\n

    Mere specifikt, hvis dit websted ikke er responsivt, kan dele af det forekomme strakt, krympet eller sk\u00e6vt p\u00e5 bestemte sk\u00e6rme. P\u00e5 enheder med mindre sk\u00e6rme kan elementer, der kan trykkes, virke trange eller forvr\u00e6ngede.<\/p>\n

    Ved at identificere nogle af standard og potentielle \u00e5rsager til, at denne fejl opst\u00e5r, kan du hj\u00e6lpe dig med bedre at forst\u00e5, hvorfor dit websted st\u00f8der p\u00e5 problemer med mobilanvendelighed. Det hj\u00e6lper dig ogs\u00e5 med at bestemme, hvordan du l\u00f8ser problemet.<\/p>\n

    S\u00e5dan rettes fejlen “Klikbare elementer er for t\u00e6t p\u00e5 hinanden” (3 metoder)<\/h2>\n

    Hvis mobilbrugere har sv\u00e6rt ved at navigere p\u00e5 dit websted, hvad forhindrer dem s\u00e5 i at navigere v\u00e6k fra det? Det er vigtigt at forhindre dette problem for at l\u00f8se alle problemer med mobilanvendelighed s\u00e5 hurtigt som muligt. Lad os tage et kig p\u00e5 tre metoder, du kan bruge til at rette fejlen “Klikbare elementer eer for t\u00e6t p\u00e5 hinanden” og give en bedre brugeroplevelse til dine mobilbrugere.<\/p>\n

    1. Brug YellowPencil Visual Customizer WordPress-plugin<\/h3>\n

    YellowPencil Visual Customizer<\/a> er et frontend WordPress-plugin<\/a>, der giver dig mulighed for at redigere dit websteds CSS- og temafiler uden nogen form for kodning.<\/p>\n

    \n

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

    Dette plugin er praktisk til at \u00e6ndre st\u00f8rrelsen p\u00e5 dine klikbare m\u00e5l, s\u00e5som at g\u00f8re dine knapper st\u00f8rre. Du kan ogs\u00e5 skabe mere plads mellem klikbare elementer ved at \u00e6ndre margener og afstand mellem dem.<\/p>\n

    Du kan downloade YellowPencil-plugin’et gratis eller k\u00f8be en almindelig eller udvidet licens<\/a>. For at bruge det skal du f\u00f8rst installere og aktivere det p\u00e5 dit WordPress-websted ved at g\u00e5 til Plugins > Tilf\u00f8j nyt<\/strong>, s\u00f8ge efter pluginnet og derefter klikke p\u00e5 Installer nu > Aktiver.<\/strong><\/p>\n

    \n

    \"Muligheden
    Muligheden for at installere YellowPencil plugin i WordPress<\/figcaption><\/figure><\/figure>\n

    Derefter skal du navigere til YellowPencil > Customizations<\/strong>. Under Customizations fanen, v\u00e6lg Let\u2019s start!<\/strong><\/p>\n

    \n

    \"YellowPencil
    YellowPencil WordPress-plugin-siden “Customizations”.<\/figcaption><\/figure><\/figure>\n

    Den visuelle tilpasningsgr\u00e6nseflade indl\u00e6ses og beder dig om at v\u00e6lge den side, der udl\u00f8ser mobilanvendelighedsfejlen.<\/p>\n

    \n

    \"YellowPencil
    YellowPencil Visual Customizer plugin-gr\u00e6nsefladen<\/figcaption><\/figure><\/figure>\n

    Du kan enten anvende dine \u00e6ndringer p\u00e5 denne specifikke side eller p\u00e5 tv\u00e6rs af hele dit websted. Hvis mange sider viser fejlen med klikbare elementer, kan du v\u00e6lge Global<\/strong>.<\/p>\n

    Foretag dit valg, og klik derefter p\u00e5 Continue<\/strong>. Du kan nu arbejde dig igennem din webside og v\u00e6lge hvert enkelt element, du kan trykke p\u00e5. YellowPencil viser et panel med redigeringsmuligheder for det element.<\/p>\n

    \n

    \"llowPencil
    YellowPencil visual customizer CSS-muligheder for klikbare elementer<\/figcaption><\/figure><\/figure>\n

    For eksempel, i nedenst\u00e5ende sk\u00e6rmbillede valgte vi padding<\/strong> og tilf\u00f8jede 10 pixels p\u00e5 alle sider for at \u00f8ge afstanden mellem de klikbare m\u00e5l:<\/p>\n

    \n

    \"Padding
    Padding indstillinger i YellowPencil-pluginets visuelle tilpasning<\/figcaption><\/figure><\/figure>\n

    Indstillingerne for Size<\/strong> og Position<\/strong> hj\u00e6lper ogs\u00e5 med at l\u00f8se fejlen “Klikbare elementer for t\u00e6t p\u00e5 hinanden”. Selvom det ikke er n\u00f8dvendigt, hvis du vil redigere CSS-koden direkte, kan du g\u00f8re det via det venstre panel.<\/p>\n

    Derefter kan du g\u00e5 videre til det n\u00e6ste element, der for\u00e5rsager problemer med mobilanvendelighed og gentage processen. N\u00e5r du er tilfreds med dine \u00e6ndringer, skal du klikke p\u00e5 den gr\u00f8nne Save<\/strong> knap.<\/p>\n

    2. S\u00f8rg for, at alle m\u00e5l, der kan klikkes p\u00e5, er mindst 48px<\/h3>\n

    Det er umuligt at skabe et enkelt statisk design, der ser godt ud og fungerer korrekt p\u00e5 tv\u00e6rs af alle enheder. I stedet ville det v\u00e6re bedst, hvis du havde til form\u00e5l at skabe et fleksibelt layout ved at definere alle dine klikbare m\u00e5l ved hj\u00e6lp af enhedsuafh\u00e6ngige pixels (dpi). Elementer, der er defineret ved hj\u00e6lp af dpi, kan automatisk skaleres til st\u00f8rrelse baseret p\u00e5 brugerens sk\u00e6rmst\u00f8rrelse.<\/p>\n

    P\u00e5 en mobilenhed er det mindst anbefalede ber\u00f8ringsm\u00e5l 48\u00d748 pixels<\/a>. Det svarer til omkring 9 mm, hvilket er tilstr\u00e6kkeligt til den gennemsnitlige persons fingerspids.<\/p>\n

    Derfor, hvis du k\u00e6mper for at finde ud af pr\u00e6cis, hvilke elementer der er kilden til problemet, kan det hj\u00e6lpe med at se p\u00e5 hvert elements dpi. Hvis det er under det anbefalede ber\u00f8ringsm\u00e5l (f.eks. 24px), kan du \u00f8ge polstringen for at bringe den til 48px.<\/p>\n

    Du kan kontrollere den beregnede v\u00e6rdi af et omr\u00e5de, der kan trykkes p\u00e5, ved hj\u00e6lp af Chrome DevTools<\/a> eller Firefox DevTools<\/a>, afh\u00e6ngigt af hvilken browser du foretr\u00e6kker<\/a>. Vi bruger Chrome som eksempel.<\/p>\n

    For at kontrollere dpi-v\u00e6rdien for et af de klikbare elementer p\u00e5 dit WordPress-websted skal du \u00e5bne det i en Chrome-browserfane og navigere til siden, der viser fejlen “Klikbare elementer for t\u00e6t p\u00e5 hinanden”. H\u00f8jreklik p\u00e5 siden og v\u00e6lg Inspect<\/strong>.<\/p>\n

    \n

    \"Indstillingen
    Indstillingen “Inspect” i Chrome-browseren<\/figcaption><\/figure><\/figure>\n

    Hvis du klikker p\u00e5 Inspect<\/strong>, \u00e5bnes Chrome DevTools. \u00d8verst skal du klikke p\u00e5 ikonet, der viser mobile enheder, hvilket bringer dig til sk\u00e6rmbilledet Toggle device toolbar<\/strong>.<\/p>\n

    \n

    \"Muligheden
    Muligheden “Toggle device toolbar” i Chrome DevTools<\/figcaption><\/figure><\/figure>\n

    I det venstre preview panel vil du se en mobil device emulation af dit websted. Hvis du holder mark\u00f8ren over og klikker p\u00e5 et af de elementer, der kan trykkes p\u00e5, kan du se den beregnede v\u00e6rdi til h\u00f8jre:<\/p>\n

    \n

    \"Google
    Google Chrome DevTools Console<\/figcaption><\/figure><\/figure>\n

    Hvis det er n\u00f8dvendigt, kan du derefter justere et elements st\u00f8rrelse ved direkte at redigere dine CSS<\/a>– og webstedsfiler eller bruge et plugin s\u00e5som YellowPencil.<\/p>\n

    3. Tjek inputmetoden<\/h3>\n

    Hvis du fors\u00f8ger at rette fejlen “Klikbare elementer for t\u00e6t p\u00e5 hinanden”, kan det hj\u00e6lpe med at kontrollere inputmetoden<\/a>. Det refererer til den metode eller enhed, en bruger bruger til at se og interagere med dit websted. Mere specifikt kan du se, om de bruger en smartphone, tablet eller andre enheder.<\/p>\n

    For eksempel betragtes ber\u00f8ring som en upr\u00e6cis inputmetode. Som vi lige har diskuteret, kan brug af CSS til at \u00f8ge st\u00f8rrelsen p\u00e5 dine ber\u00f8ringsf\u00f8lsomme m\u00e5l eller tilf\u00f8jelse af ekstra padding g\u00f8re det nemmere for bes\u00f8gende at trykke p\u00e5, der bruger ber\u00f8ringsenheder til at interagere med dit websted.<\/p>\n

    At bestemme en brugers enhed er dog ikke en eksakt videnskab. Denne teknik bruger det, der er kendt som “pointeren” til at kontrollere brugerens prim\u00e6re inputmetode, som kan have en af \u200b\u200bto v\u00e6rdier:<\/p>\n