{"id":39396,"date":"2021-05-30T20:42:45","date_gmt":"2021-05-30T18:42:45","guid":{"rendered":"https:\/\/kinsta.com\/?p=92617&preview=true&preview_id=92617"},"modified":"2023-09-21T12:10:30","modified_gmt":"2023-09-21T12:10:30","slug":"klickbara-element-for-nara-varandra","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/klickbara-element-for-nara-varandra\/","title":{"rendered":"S\u00e5 h\u00e4r fixar du felet ”Klickbara element f\u00f6r n\u00e4ra varandra” (3 metoder)"},"content":{"rendered":"

Ol\u00f6sta mobilanv\u00e4ndbarhetsproblem kan ha en betydande inverkan p\u00e5 din webbplats trafik. Ett vanligt problem som Google Search Console<\/a> kan varna dig om \u00e4r felet ”Klickbara element f\u00f6r n\u00e4ra varandra”, vilket sannolikt inneb\u00e4r att din webbplats \u00e4r lite f\u00f6r komplicerad f\u00f6r mobila anv\u00e4ndare att navigera.<\/p>\n

Mer \u00e4n 4,32 miljarder m\u00e4nniskor<\/a> \u00f6ppnar internet fr\u00e5n sina mobila enheter. D\u00e4rf\u00f6r \u00e4r det viktigt att l\u00f6sa detta fel med klickbara element s\u00e5 snart som m\u00f6jligt. Tack och lov finns det flera s\u00e4tt du kan g\u00f6ra det p\u00e5 och g\u00f6ra din webbplats mer mobilv\u00e4nlig.<\/p>\n

I den h\u00e4r artikeln kommer vi att f\u00f6rklara vad problemet ”Klickbara element f\u00f6r n\u00e4ra varandra” \u00e4r, diskutera varf\u00f6r det h\u00e4nder och g\u00e5 igenom tre metoder du kan anv\u00e4nda f\u00f6r att fixa det. Vi f\u00f6rklarar ocks\u00e5 vad felet ”inneh\u00e5ll bredare \u00e4n sk\u00e4rm” \u00e4r och hur du kan l\u00f6sa det.<\/p>\n

Nu s\u00e4tter vi ig\u00e5ng!<\/p>\n

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

Vad \u00e4r felet ”Klickbara element f\u00f6r n\u00e4ra varandra”?<\/h2>\n

I ett n\u00f6tskal kan mobilanv\u00e4ndbarhetsfel g\u00f6ra din WordPresswebbplats otillg\u00e4nglig<\/a> och sv\u00e5rare f\u00f6r mobila anv\u00e4ndare att navigera. Du kan anv\u00e4nda Google Search Consoles mobilanv\u00e4ndbarhetsrapport<\/a> f\u00f6r att testa din webbplats.<\/p>\n

\n

\"Google
Google Search Consoles rapportverktyg f\u00f6r mobilanv\u00e4ndbarhet<\/figcaption><\/figure><\/figure>\n

Det finns sex huvudsakliga typer av mobilanv\u00e4ndbarhetsproblem som du kan st\u00f6ta p\u00e5:<\/p>\n

    \n
  1. Anv\u00e4nder inkompatibla plugins<\/li>\n
  2. Visningsf\u00f6nster inte inst\u00e4llt<\/li>\n
  3. Visningsf\u00f6nster inte inst\u00e4llt p\u00e5 ”enhetsbredd”<\/li>\n
  4. Text f\u00f6r liten f\u00f6r att l\u00e4sa<\/li>\n
  5. Inneh\u00e5ll bredare \u00e4n sk\u00e4rmen<\/li>\n
  6. Klickbara element f\u00f6r n\u00e4ra varandra<\/li>\n<\/ol>\n

    Som en del av den h\u00e4r rapporten kontrollerar Google Search Console alla klickbara element p\u00e5 din webbplats, till exempel knappar och l\u00e4nkar. Syftet med detta \u00e4r att kontrollera om mobila anv\u00e4ndare bekv\u00e4mt kan interagera med webbplatsens element med enbart peksk\u00e4rm, utan att anv\u00e4nda tangentbord eller mus.<\/p>\n

    Om Google Search Console fastst\u00e4ller att dina klickbara element utg\u00f6r en utmaning f\u00f6r mobila anv\u00e4ndare, kommer det att inkludera felet ”klickbara element f\u00f6r n\u00e4ra varandra” i sammanfattningsrapporten.<\/p>\n

    \n

    \"En
    En rapport om mobilanv\u00e4ndbarhet fr\u00e5n Google Search Console<\/figcaption><\/figure><\/figure>\n

    Om du klickar p\u00e5 felet kommer det att ta dig till sidan f\u00f6r detaljer och status. P\u00e5 den h\u00e4r sk\u00e4rmen kan du l\u00e4sa mer om problemet, inklusive de g\u00e4llande sidorna.<\/p>\n

    \n

    \"Felet
    Felet ”Klickbara element f\u00f6r n\u00e4ra varandra” i Google Search Console<\/figcaption><\/figure><\/figure>\n

    I huvudsak \u00e4r klickbara element-felet en varning som indikerar att de klickbara elementen p\u00e5 din WordPresswebbplats \u00e4r f\u00f6r sm\u00e5 f\u00f6r mobila anv\u00e4ndare att interagera med bekv\u00e4mt.<\/p>\n

    Alternativt kan det inneb\u00e4ra att de \u00e4r tillr\u00e4ckligt stora, men placerade f\u00f6r n\u00e4ra n\u00e4rliggande element. Om knappar, l\u00e4nkar och andra klickbara objekt ligger f\u00f6r n\u00e4ra varandra riskerar anv\u00e4ndarna att klicka p\u00e5 fel, vilket skadar anv\u00e4ndarupplevelsen (UX).<\/p>\n

    \u00c4ven om klickbara element f\u00f6r n\u00e4ra varandra klassas som ett mobilanv\u00e4ndbarhetsfel, kan l\u00f6sningen av problemet ocks\u00e5 f\u00f6rb\u00e4ttra tillg\u00e4ngligheten p\u00e5 din webbplats<\/a>. Till exempel kommer \u00e4ven personer med finmotoriksproblem uppskatta lite extra utrymme mellan interaktiva element. D\u00e4remot kan anv\u00e4ndare med synrelaterade problem tycka att det \u00e4r l\u00e4ttare att interagera med stora, tydligt definierade knappar och l\u00e4nkar.<\/p>\n\n

    Varf\u00f6r felet ”klickbara element f\u00f6r n\u00e4ra varandra” visas<\/h3>\n

    Olika faktorer kan resultera i problemet ”Klickbara element f\u00f6r n\u00e4ra varandra”. Ibland \u00e4r det bara f\u00f6r att Google inte kunde beg\u00e4ra n\u00f6dv\u00e4ndiga resurser under renderingen. Om s\u00e5 \u00e4r fallet kan du f\u00f6rs\u00f6ka anv\u00e4nda mobilv\u00e4nlighetstestet<\/a> och se om det blir godk\u00e4nt. Om det g\u00f6r det, kan du f\u00f6rmodligen ignorera det.<\/p>\n

    Det h\u00e4r problemet kan ocks\u00e5 bero p\u00e5 din webbplatsdesign<\/a>. Om du till exempel f\u00f6rs\u00f6ker kl\u00e4mma in f\u00f6r m\u00e5nga interaktiva element p\u00e5 en enda webbsida kan det h\u00e4r mobilanv\u00e4ndbarhetsfelet ofta dyka upp.<\/p>\n

    En annan orsak till klickbara element-felet \u00e4r att det finns ett problem med mobil responsivitet<\/a> i din webbplatsdesign. Din webbplats ska vara flexibel och automatiskt anpassa sig till bes\u00f6karens specifika enhet f\u00f6r att ge b\u00e4sta m\u00f6jliga UX. Men om din webbplats inte \u00e4r responsiv kan det leda till anv\u00e4ndbarhetsproblem.<\/p>\n

    Mer specifikt, om din webbplats inte \u00e4r responsiv kan delar av den se utstr\u00e4ckt, krympt eller skev ut p\u00e5 specifika sk\u00e4rmar. P\u00e5 enheter med mindre sk\u00e4rmar kan klickbara element se intr\u00e4ngda eller f\u00f6rvr\u00e4ngda ut.<\/p>\n

    Att identifiera n\u00e5gra av de vanliga och potentiella orsakerna till detta fel kan hj\u00e4lpa dig att b\u00e4ttre f\u00f6rst\u00e5 varf\u00f6r din webbplats st\u00f6ter p\u00e5 problem med mobilanv\u00e4ndbarhet. Det hj\u00e4lper dig ocks\u00e5 att best\u00e4mma hur du ska \u00e5tg\u00e4rd problemet.<\/p>\n

    S\u00e5 h\u00e4r fixar du felet ”Klickbara element f\u00f6r n\u00e4ra varandra” (3 metoder)<\/h2>\n

    Om mobilanv\u00e4ndare k\u00e4mpar f\u00f6r att navigera p\u00e5 din webbplats, vad hindrar dem fr\u00e5n att navigera bort <\/em>fr\u00e5n den? Att f\u00f6rhindra detta problem \u00e4r viktigt f\u00f6r att l\u00f6sa alla mobilanv\u00e4ndbarhetsproblem s\u00e5 snabbt som m\u00f6jligt. L\u00e5t oss ta en titt p\u00e5 tre metoder som du kan anv\u00e4nda f\u00f6r att \u00e5tg\u00e4rda felet ”klickbara element f\u00f6r n\u00e4ra varandra” och ge b\u00e4ttre UX \u00e5t dina mobila anv\u00e4ndare.<\/p>\n

    1. Anv\u00e4nd WordPresspluginet YellowPencil Visual Customizer<\/h3>\n

    YellowPencil Visual Customizer<\/a> \u00e4r ett frontend WordPressplugin<\/a> som g\u00f6r att du kan redigera din webbplats CSS och temafiler utan kodning.<\/p>\n

    \n

    \"WordPresspluginet
    WordPresspluginet YellowPencil Visuella Customizer<\/figcaption><\/figure><\/figure>\n

    Detta plugin \u00e4r praktiskt f\u00f6r att \u00e4ndra ditt klickbara m\u00e5ls storlek, s\u00e5som att g\u00f6ra dina knappar st\u00f6rre. Du kan ocks\u00e5 skapa mer utrymme mellan klickbara element genom att \u00e4ndra marginalerna och avst\u00e5ndet mellan dem.<\/p>\n

    Du kan ladda ner YellowPencil-pluginet gratis eller k\u00f6pa en vanlig eller ut\u00f6kad licens<\/a>. Installera och aktivera det p\u00e5 din WordPresswebbplats genom att bl\u00e4ddra till Plugins<\/strong> > L\u00e4gg till nya<\/strong>, s\u00f6ka efter pluginet, och klicka sedan p\u00e5 Installera nu<\/strong> > Aktivera<\/strong>.<\/p>\n

    \n

    \"Alternativet
    Alternativet att installera YellowPencil i WordPress<\/figcaption><\/figure><\/figure>\n

    Navigera sedan till YellowPencil <\/strong>> Anpassningar<\/strong>. Under fliken Anpassningar <\/strong>v\u00e4ljer du S\u00e4tt ig\u00e5ng!<\/strong><\/p>\n

    \n

    \"YellowPencil
    YellowPencil WordPresspluginets sida ”Anpassningar”<\/figcaption><\/figure><\/figure>\n

    Visual customizer-gr\u00e4nssnittet laddar och uppmanar dig att v\u00e4lja den sida som utl\u00f6ser mobilanv\u00e4ndbarhetsfelet.<\/p>\n

    \n

    \"YellowPencil
    YellowPencil Visual Customizer-pluginet gr\u00e4nssnitt<\/figcaption><\/figure><\/figure>\n

    Du kan antingen till\u00e4mpa dina \u00e4ndringar p\u00e5 den h\u00e4r specifika sidan eller \u00f6ver hela din webbplats. Om m\u00e5nga sidor har klickbara element-fel, kan det vara bra att v\u00e4lja Global<\/strong>.<\/p>\n

    G\u00f6r ditt val och klicka sedan p\u00e5 Forts\u00e4tt<\/strong>. Du kan nu arbeta dig igenom din sida och v\u00e4lja varje klickbart element. YellowPencil visar en panel med redigeringsalternativ f\u00f6r det elementet.<\/p>\n

    \n

    \"YellowPencils
    YellowPencils visual customizer CSS-alternativ f\u00f6r klickbara element<\/figcaption><\/figure><\/figure>\n

    I nedanst\u00e5ende sk\u00e4rmdump har vi till exempel valt spaltfyllnad<\/strong> och lagt till 10 pixlar p\u00e5 alla sidor f\u00f6r att \u00f6ka utrymmet mellan de klickbara m\u00e5len:<\/p>\n

    \n

    \"Spaltfyllnadsinst\u00e4llningar
    Spaltfyllnadsinst\u00e4llningar i YellowPencil<\/figcaption><\/figure><\/figure>\n

    Inst\u00e4llningarna f\u00f6r Storlek<\/strong> och Position<\/strong> hj\u00e4lper ocks\u00e5 till att l\u00f6sa felet ”klickbara element f\u00f6r n\u00e4ra varandra”. Det \u00e4r inte n\u00f6dv\u00e4ndigt, men om du vill redigera CSS-koden direkt, kan du g\u00f6ra det via den v\u00e4nstra panelen.<\/p>\n

    Sedan kan du g\u00e5 vidare till n\u00e4sta element som orsakar problem med mobilanv\u00e4ndbarhet och upprepa processen. N\u00e4r du \u00e4r n\u00f6jd med dina \u00e4ndringar, klicka p\u00e5 den gr\u00f6na knappen Spara<\/strong>.<\/p>\n

    2. Se till att alla klickbara m\u00e5l \u00e4r minst 48px<\/h3>\n

    Det \u00e4r om\u00f6jligt att skapa en enda statisk design som ser bra ut och<\/em> fungerar korrekt p\u00e5 alla enheter. Ist\u00e4llet skulle det vara b\u00e4st om du f\u00f6rs\u00f6kte skapa en flexibel<\/em> layout genom att definiera alla dina klickbara m\u00e5l med enhetsoberoende pixlar (dpi). Element som definieras med dpi kan automatiskt skalas till r\u00e4tt storlek baserat p\u00e5 anv\u00e4ndarens sk\u00e4rmstorlek.<\/p>\n

    P\u00e5 en mobil enhet \u00e4r det minsta rekommenderade peksk\u00e4rmsm\u00e5let 48\u00d748 pixlar<\/a>. Det motsvarar ca 9 mm, vilket \u00e4r tillr\u00e4ckligt f\u00f6r de flesta anv\u00e4ndare.<\/p>\n

    Om du har problem med att lista ut exakt vilka element som \u00e4r k\u00e4llan till problemet, kan det hj\u00e4lpa att unders\u00f6ka varje elements dpi. Om det \u00e4r under det rekommenderade peksk\u00e4rmsm\u00e5let (t. ex. 24px) kan du \u00f6ka spaltfyllnaden f\u00f6r att f\u00e5 upp den till 48px.<\/p>\n

    Du kan kontrollera det ber\u00e4knade v\u00e4rdet av ett klickbart omr\u00e5de med Chrome DevTools<\/a> eller Firefox DevTools<\/a>, beroende p\u00e5 vilken webbl\u00e4sare du f\u00f6redrar<\/a>. Vi anv\u00e4nder Chrome som ett exempel.<\/p>\n

    F\u00f6r att kontrollera dpi-v\u00e4rdet f\u00f6r ett av de klickbara elementen p\u00e5 din WordPresswebbplats, \u00f6ppna den i en flik i Chrome och navigera till sidan som visar felet ”klickbara element f\u00f6r n\u00e4ra varandra”. H\u00f6gerklicka p\u00e5 sidan och v\u00e4lj Inspektera<\/strong>.<\/p>\n

    \n

    \"Alternativet
    Alternativet ”inspektera” i Chrome-webbl\u00e4saren<\/figcaption><\/figure><\/figure>\n

    Genom att klicka Inspektera<\/strong> \u00f6ppnas Chrome DevTools. L\u00e4ngst upp klickar du p\u00e5 ikonen som visar mobila enheter, vilket tar dig till sk\u00e4rmen Byt enhetsverktygsf\u00e4lt<\/strong>.<\/p>\n

    \n

    \"Alternativet
    Alternativet ”byt enhetsverktygsf\u00e4lt” i Chrome DevTools<\/figcaption><\/figure><\/figure>\n

    I den v\u00e4nstra f\u00f6rhandsgranskningspanelen ser du en emulering av hur din webbplats ser ut i en mobil enhet. Om du h\u00e5ller muspekaren \u00f6ver och klickar p\u00e5 n\u00e5got av de klickbara elementen kan du visa det ber\u00e4knade v\u00e4rdet till h\u00f6ger:<\/p>\n

    \n

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

    Om det beh\u00f6vs kan du sedan justera ett elements m\u00e5tt genom att direkt redigera dina CSS<\/a> -och webbplatsfiler eller anv\u00e4nda ett plugin som YellowPencil.<\/p>\n

    3. Kontrollera inmatningsmetoden<\/h3>\n

    Om du f\u00f6rs\u00f6ker \u00e5tg\u00e4rda felet ”klickbara element f\u00f6r n\u00e4ra varandra” kan det hj\u00e4lpa till att kontrollera inmatningsmetoden<\/a>. Det handlar om vilken metod eller enhet som en anv\u00e4ndare anv\u00e4nder f\u00f6r att visa och interagera med din webbplats. Mer specifikt kan du se om de anv\u00e4nder en smartphone, surfplatta eller andra enheter.<\/p>\n

    Peksk\u00e4rm anses till exempel vara en oprecis inmatningsmetod. Som vi just diskuterat kan anv\u00e4ndning av CSS f\u00f6r att \u00f6ka storleken p\u00e5 dina peksk\u00e4rmsm\u00e5l eller l\u00e4gga till extra spaltfyllnad g\u00f6ra klickbara m\u00e5l enklare f\u00f6r bes\u00f6kare som anv\u00e4nder peksk\u00e4rmsenheter f\u00f6r att interagera med din webbplats.<\/p>\n

    Att best\u00e4mma vilken enhet en anv\u00e4ndare anv\u00e4nder \u00e4r dock inte en exakt vetenskap. Denna teknik anv\u00e4nder det som kallas ”pekare” f\u00f6r att kontrollera anv\u00e4ndarens prim\u00e4ra inmatningsmetod, som kan ha ett av tv\u00e5 v\u00e4rden:<\/p>\n