Olösta mobilanvändbarhetsproblem kan ha en betydande inverkan på din webbplats trafik. Ett vanligt problem som Google Search Console kan varna dig om är felet ”Klickbara element för nära varandra”, vilket sannolikt innebär att din webbplats är lite för komplicerad för mobila användare att navigera.
Mer än 4,32 miljarder människor öppnar internet från sina mobila enheter. Därför är det viktigt att lösa detta fel med klickbara element så snart som möjligt. Tack och lov finns det flera sätt du kan göra det på och göra din webbplats mer mobilvänlig.
I den här artikeln kommer vi att förklara vad problemet ”Klickbara element för nära varandra” är, diskutera varför det händer och gå igenom tre metoder du kan använda för att fixa det. Vi förklarar också vad felet ”innehåll bredare än skärm” är och hur du kan lösa det.
Nu sätter vi igång!
Vad är felet ”Klickbara element för nära varandra”?
I ett nötskal kan mobilanvändbarhetsfel göra din WordPresswebbplats otillgänglig och svårare för mobila användare att navigera. Du kan använda Google Search Consoles mobilanvändbarhetsrapport för att testa din webbplats.
Det finns sex huvudsakliga typer av mobilanvändbarhetsproblem som du kan stöta på:
- Använder inkompatibla plugins
- Visningsfönster inte inställt
- Visningsfönster inte inställt på ”enhetsbredd”
- Text för liten för att läsa
- Innehåll bredare än skärmen
- Klickbara element för nära varandra
Som en del av den här rapporten kontrollerar Google Search Console alla klickbara element på din webbplats, till exempel knappar och länkar. Syftet med detta är att kontrollera om mobila användare bekvämt kan interagera med webbplatsens element med enbart pekskärm, utan att använda tangentbord eller mus.
Om Google Search Console fastställer att dina klickbara element utgör en utmaning för mobila användare, kommer det att inkludera felet ”klickbara element för nära varandra” i sammanfattningsrapporten.
Om du klickar på felet kommer det att ta dig till sidan för detaljer och status. På den här skärmen kan du läsa mer om problemet, inklusive de gällande sidorna.
I huvudsak är klickbara element-felet en varning som indikerar att de klickbara elementen på din WordPresswebbplats är för små för mobila användare att interagera med bekvämt.
Alternativt kan det innebära att de är tillräckligt stora, men placerade för nära närliggande element. Om knappar, länkar och andra klickbara objekt ligger för nära varandra riskerar användarna att klicka på fel, vilket skadar användarupplevelsen (UX).
Även om klickbara element för nära varandra klassas som ett mobilanvändbarhetsfel, kan lösningen av problemet också förbättra tillgängligheten på din webbplats. Till exempel kommer även personer med finmotoriksproblem uppskatta lite extra utrymme mellan interaktiva element. Däremot kan användare med synrelaterade problem tycka att det är lättare att interagera med stora, tydligt definierade knappar och länkar.
Varför felet ”klickbara element för nära varandra” visas
Olika faktorer kan resultera i problemet ”Klickbara element för nära varandra”. Ibland är det bara för att Google inte kunde begära nödvändiga resurser under renderingen. Om så är fallet kan du försöka använda mobilvänlighetstestet och se om det blir godkänt. Om det gör det, kan du förmodligen ignorera det.
Det här problemet kan också bero på din webbplatsdesign. Om du till exempel försöker klämma in för många interaktiva element på en enda webbsida kan det här mobilanvändbarhetsfelet ofta dyka upp.
En annan orsak till klickbara element-felet är att det finns ett problem med mobil responsivitet i din webbplatsdesign. Din webbplats ska vara flexibel och automatiskt anpassa sig till besökarens specifika enhet för att ge bästa möjliga UX. Men om din webbplats inte är responsiv kan det leda till användbarhetsproblem.
Mer specifikt, om din webbplats inte är responsiv kan delar av den se utsträckt, krympt eller skev ut på specifika skärmar. På enheter med mindre skärmar kan klickbara element se inträngda eller förvrängda ut.
Att identifiera några av de vanliga och potentiella orsakerna till detta fel kan hjälpa dig att bättre förstå varför din webbplats stöter på problem med mobilanvändbarhet. Det hjälper dig också att bestämma hur du ska åtgärd problemet.
Så här fixar du felet ”Klickbara element för nära varandra” (3 metoder)
Om mobilanvändare kämpar för att navigera på din webbplats, vad hindrar dem från att navigera bort från den? Att förhindra detta problem är viktigt för att lösa alla mobilanvändbarhetsproblem så snabbt som möjligt. Låt oss ta en titt på tre metoder som du kan använda för att åtgärda felet ”klickbara element för nära varandra” och ge bättre UX åt dina mobila användare.
1. Använd WordPresspluginet YellowPencil Visual Customizer
YellowPencil Visual Customizer är ett frontend WordPressplugin som gör att du kan redigera din webbplats CSS och temafiler utan kodning.
Detta plugin är praktiskt för att ändra ditt klickbara måls storlek, såsom att göra dina knappar större. Du kan också skapa mer utrymme mellan klickbara element genom att ändra marginalerna och avståndet mellan dem.
Du kan ladda ner YellowPencil-pluginet gratis eller köpa en vanlig eller utökad licens. Installera och aktivera det på din WordPresswebbplats genom att bläddra till Plugins > Lägg till nya, söka efter pluginet, och klicka sedan på Installera nu > Aktivera.
Navigera sedan till YellowPencil > Anpassningar. Under fliken Anpassningar väljer du Sätt igång!
Visual customizer-gränssnittet laddar och uppmanar dig att välja den sida som utlöser mobilanvändbarhetsfelet.
Du kan antingen tillämpa dina ändringar på den här specifika sidan eller över hela din webbplats. Om många sidor har klickbara element-fel, kan det vara bra att välja Global.
Gör ditt val och klicka sedan på Fortsätt. Du kan nu arbeta dig igenom din sida och välja varje klickbart element. YellowPencil visar en panel med redigeringsalternativ för det elementet.
I nedanstående skärmdump har vi till exempel valt spaltfyllnad och lagt till 10 pixlar på alla sidor för att öka utrymmet mellan de klickbara målen:
Inställningarna för Storlek och Position hjälper också till att lösa felet ”klickbara element för nära varandra”. Det är inte nödvändigt, men om du vill redigera CSS-koden direkt, kan du göra det via den vänstra panelen.
Sedan kan du gå vidare till nästa element som orsakar problem med mobilanvändbarhet och upprepa processen. När du är nöjd med dina ändringar, klicka på den gröna knappen Spara.
2. Se till att alla klickbara mål är minst 48px
Det är omöjligt att skapa en enda statisk design som ser bra ut och fungerar korrekt på alla enheter. Istället skulle det vara bäst om du försökte skapa en flexibel layout genom att definiera alla dina klickbara mål med enhetsoberoende pixlar (dpi). Element som definieras med dpi kan automatiskt skalas till rätt storlek baserat på användarens skärmstorlek.
På en mobil enhet är det minsta rekommenderade pekskärmsmålet 48×48 pixlar. Det motsvarar ca 9 mm, vilket är tillräckligt för de flesta användare.
Om du har problem med att lista ut exakt vilka element som är källan till problemet, kan det hjälpa att undersöka varje elements dpi. Om det är under det rekommenderade pekskärmsmålet (t. ex. 24px) kan du öka spaltfyllnaden för att få upp den till 48px.
Du kan kontrollera det beräknade värdet av ett klickbart område med Chrome DevTools eller Firefox DevTools, beroende på vilken webbläsare du föredrar. Vi använder Chrome som ett exempel.
För att kontrollera dpi-värdet för ett av de klickbara elementen på din WordPresswebbplats, öppna den i en flik i Chrome och navigera till sidan som visar felet ”klickbara element för nära varandra”. Högerklicka på sidan och välj Inspektera.
Genom att klicka Inspektera öppnas Chrome DevTools. Längst upp klickar du på ikonen som visar mobila enheter, vilket tar dig till skärmen Byt enhetsverktygsfält.
I den vänstra förhandsgranskningspanelen ser du en emulering av hur din webbplats ser ut i en mobil enhet. Om du håller muspekaren över och klickar på något av de klickbara elementen kan du visa det beräknade värdet till höger:
Om det behövs kan du sedan justera ett elements mått genom att direkt redigera dina CSS -och webbplatsfiler eller använda ett plugin som YellowPencil.
3. Kontrollera inmatningsmetoden
Om du försöker åtgärda felet ”klickbara element för nära varandra” kan det hjälpa till att kontrollera inmatningsmetoden. Det handlar om vilken metod eller enhet som en användare använder för att visa och interagera med din webbplats. Mer specifikt kan du se om de använder en smartphone, surfplatta eller andra enheter.
Pekskärm anses till exempel vara en oprecis inmatningsmetod. Som vi just diskuterat kan användning av CSS för att öka storleken på dina pekskärmsmål eller lägga till extra spaltfyllnad göra klickbara mål enklare för besökare som använder pekskärmsenheter för att interagera med din webbplats.
Att bestämma vilken enhet en användare använder är dock inte en exakt vetenskap. Denna teknik använder det som kallas ”pekare” för att kontrollera användarens primära inmatningsmetod, som kan ha ett av två värden:
- Grov: enhetens primära inmatningsmetod är pekskärm.
- Fin: inmatningsmetoden är en mus och styrplatta.
Observera att om pekskärmen är användarens primära inmatningsmetod tyder detta på att personen tittar på din webbplats på en smartphone eller en surfplatta.
Närvaron av en pekskärm garanterar dock inte att någon använder en mobil enhet. De kan komma åt din webbplats med en stor, pekskärmsaktiverad bärbar dator, eller de kan ha anslutit en Bluetooth-enhet till sin smartphone.
Om pekaren returnerar ett grovt värde kan du justera det klickbara målets storlek med hjälp av CSS. För att göra det kan du placera följande i CSS-filen i ditt WordPresstema (eller genom att använda ett plugin som YellowPencil):
.container a {
padding: .2em;
}
@media (pointer: coarse) {
.container a {
padding: .8em;
}
}
När du har justerat din CSS kan du tala om för Google att söka igenom din webbplats på nytt för att avgöra om detta har åtgärdat problemet.
Alternativt kan du be Google att genomsöka enskilda webbadresser på nytt, med hjälp av verktyget URL-inspektion. När du har skickat in din webbadress via det här verktyget väljer du Begär indexering. Inspektionsverktyget testar sedan webbadressen för eventuella uppenbara indexeringsproblem.
Om Google inte hittar några problem kommer sidan sedan att kvalificera sig för indexering.
Alternativt kan du skicka in en webbplatskarta om du har ett stort antal webbadresser. För varje sida som kräver om-indexering, uppdatera dess <lastmod>-tagg med det senaste modifieringsdatumet. Du kan sedan skicka in webbplatskartan med Googles rapportverktyg för webbplatskartor.
I de flesta fall kommer din webbplatskarta att gå igenom omedelbart. Det kan dock ta lite tid för Google att genomsöka alla webbadresser i webbplatskartan, beroende på faktorer som webbplatsstorlek, trafik och aktivitet. Det finns ingen garanti för att Google genomsöker varje enskild webbadress i webbplatskartan.
Vad är felet ”innehåll bredare än skärm”?
Som du kanske kommer ihåg kan Google Search Console varna dig om olika mobilanvändbarhetsfel. Utöver ”klickbara element för nära varandra” kan din sammanfattningsrapport också innehålla problemet ”innehåll bredare än skärm”.
Problemet visas på samma plats i Google Search Console som felet ”klickbara element”. Precis som detta fel har det en mängd potentiella orsaker.
Varför felet ”Innehåll bredare än skärm” kan visas
Det här felet uppstår när din webbplatsdesign expanderar horisontellt, vilket tvingar mobila användare att svepa åt sidan för att visa innehållet som inte får plats i fönstret. För att ge en bra användarupplevelse bör du undvika horisontell bläddring där det är möjligt.
Det är mer sannolikt att du stöter på problemet ”Innehåll bredare än skärm” om du använder absoluta värden i dina CSS-deklarationer. Eftersom icke-flexibla layouter kan resultera i felet ”Klickbara element” är det inte ovanligt att stöta på dessa två fel i samma mobilanvändbarhetsrapport.
Så här fixar du felet ”innehåll bredare än skärm” (5 Metoder)
Om din rapport innehåller felet ”innehåll bredare än skärm” kan du använda några enkla metoder för att lösa det. Låt oss ta en titt på fem av de vanligaste alternativen.
1. Undvik att använda absoluta variabler i CSS-deklarationer
Ett av de bästa sätten att åtgärda felet ”innehåll bredare än skärm” är att undvika att använda absoluta variabler i dina CSS-deklarationer. Innehållet ska inte kräva ett visst visningsfönster för att visas och fungera korrekt.
Därför bör du istället för att använda absoluta värden välja relativa bredd- och positionsvärden för dina CSS-element. Med hjälp av relativa värden där det är möjligt kan du skapa flexibla layouter som skalas för att passa en rad skärmstorlekar.
2. Tilldela bilder en maximal bredd
En bild med fasta mått kan se större ut än visningsskärmen och i sin tur utlösa felet ”Innehåll bredare än skärm”. För att säkerställa att dina bilder skalas baserat på skärmens mått är det bäst att tilldela alla bilder en maxbredd på 100%.
Det kommer att tvinga bilden att krympa för att passa det tillgängliga utrymmet. Även om du använder max-width bör du fortfarande använda attributen bredd och höjd i <image>-taggen, eftersom moderna webbläsare använder den här informationen för att reservera utrymme för bilder när de laddas. Med taggen <image> kan du undvika layoutändringar när dina bilder äntligen visas på skärmen.
3. Använd Meta Viewport-taggar
Som standard renderar mobila webbläsare sidan med skrivbordets skärmbredd, som vanligtvis är runt 980px. Webbläsaren kommer då att försöka optimera din sida genom att öka teckenstorleken och skala ditt innehåll för att passa de aktuella skärmmåtten.
Tyvärr kan detta standardbeteende resultera i vissa inkonsekventa visningar. Vissa användare kan behöva zooma in för att läsa och interagera med ditt innehåll och då kanske du ser det här felet.
I stället för att förlita sig på detta standardbeteende bör du ge webbläsaren instruktioner om hur du styr sidans mått och skala. Du kan göra detta genom att infoga en meta viewport-tagg i dokumentets sidhuvud.
4. Använd moderna CSS-layouttekniker
Du kan också åtgärda felet ”innehåll bredare än skärm” genom att ändra webbplatsens layout. För att hjälpa dig att skapa mer flexibla layouter kan du välja att implementera tekniker som Flexbox, CSS-rutnätslayout eller Flerkolumnslayout (Multicol).
5. Använd CSS-mediaförfrågningar där det är lämpligt
Mediaförfrågningar kan göra det lättare att ändra stilar baserat på användarens enhet, inklusive pekskärmar. Om du fortfarande har att göra med ”innehåll bredare än skärmen”-felet nu, rekommenderar vi därför att du använder CSS-mediaförfrågningar där det är lämpligt.
När du har gjort dessa ändringar är det dags att testa om du har löst felet ”innehåll bredare än skärm”. Du kan göra detta genom att köra mobilanvändbarhetsrapporten igen och validera fixen med hjälp av de steg vi kommer diskutera i nästa avsnitt.
Så här verifierar och validerar du din fellösning
Oavsett vilka av ovanstående fel du har att göra med eller de metoder du använder för att åtgärda det, är det viktigt att ta reda på om dina ändringar har löst problemet. Du kan göra detta genom att köra Googles mobilanvändbarhetstester.
För att göra det, navigera tillbaka till din Mobilanvändbarhetsrapport och hitta felet ”klickbara element för nära varandra”. Välj sedan alternativet Validera fix.
Observera att du kan upprepa samma steg om du försöker verifiera och validera din fellösning för ”innehåll bredare än skärmen.” Google genomsöker sedan din webbplats och du får ett meddelande om att det håller på att validera ändringen.
Om du har löst felet visas ett meddelande i Google Search Console och en medföljande grön bock. Å andra sidan, om de fixar du använde inte valideras måste du se över felet igen för att hitta en alternativ lösning.
Sammanfattning
Olösta mobilanvändbarhetsfel kan resultera i en dålig användarupplevelse och en märkbar minskning av webbplatsens trafik. Genom att vidta åtgärder för att lösa användbarhetsfel kan du se till att din webbplats är mobilvänlig och tillgänglig för fler människor.
I det här inlägget lärde du dig hur du åtgärdar felet ”klickbara element för nära varandra” med hjälp av tre metoder:
- Ändra din webbplats med hjälp av ett CSS stilredigeringsplugin på frontenden (som YellowPencil).
- Använda Chrome DevTools för att säkerställa att alla klickbara mål är 48 dpi eller större.
- Kontrollera inmatningsmetoden och justera din CSS i enlighet med detta.
Har du några frågor om att fixa felet ”klickbara element för nära varandra”? Låt oss veta i kommentarerna nedan!
Salman Ravoof är en självlärd webbutvecklare, författare, skapare och en stor beundrare av fri och öppen källkod (FOSS). Förutom teknik är han intresserad av vetenskap, filosofi, fotografi, konst, katter och mat. Lär dig mer om honom på hans hemsida och kontakta Salman på X.
Lämna ett svar