2.5.8 Klickytans storlek AA

Ibland behöver användare klicka på knappar, länkar och andra interaktiva element. Men vad händer om dessa är för små och svåra att träffa? För människor med motoriska nedsättningar eller problem att använda musen kan det vara en utmaning att klicka på små klickytor. Därför är det viktigt att göra klickytan större och lättare att träffa.

• Knapp
• Knapp
• Knapp

• 1
• 2
• 3
• 4
• 5
• 6
• 7

Kraven

Riktlinjen definierar krav på storlek för klickytor och utrymmet mellan dem. Man ska i första hand försöka nå kraven för storlek, men för små klickytor kan ändå godkännas om kraven för utrymme uppnås. 

Storlek

Kravet för att uppnå denna riktlinje är att klickytan ska vara minst 24 × 24 CSS-pixlar stor. Man ska kunna rita en 24 × 24 CSS-pixlar stor kvadrat och den ska helt få plats innanför klickytan.

Knapp

1

Dessa två knappar har en 24 × 24 CSS-pixlar stor kvadrat centrerad i knappens mitt. Den första har kvadraten helt innanför knappen och följer därför storlekskravet. Den andra knappen är mindre och kvadraten går utanför knappens gränser. Detta följer inte storlekskravet.

Utrymme

Om klickytan är mindre än 24 × 24 CSS-pixlar kan den fortfarande godkännas om det finns tillräckligt med utrymme runt klickytan. Man ska kunna rita en 24 CSS-pixlar i diameter stor cirkel centrerad över klickytans mitt. Cirkeln får inte kollidera med cirkeln eller klickytan av något annat klickbart element. Får cirkeln plats så är det godkänt.

1 2 3 4

Knapp 1 och 2 har inte tillräckligt med utrymme runt sig eftersom deras cirklar kolliderar med varandra. Knapp 3 och 4 däremot är godkända eftersom deras cirklar inte kolliderar med något annat.

Undantag

• Om funktionen kan åstadkommas med en annan kontroll på sidan.
• Om klickytan finns i löptext eller begränsas av radhöjd av kringliggande text.
• När utseendet bestäms av användarens webbläsare. Olika webbläsare kan presentera innehåll på olika sätt, och så länge utvecklaren inte har justerat hur klickytan ska presenteras, är det undantaget från denna riktlinje.
• Om det är väsentligt för funktionen att inte kunna uppnå kraven för storlek och utrymme. Ett exempel på detta är en digital karta över busshållplatser. Det finns markeringar utplacerade vid varje hållplats, men om hållplatserna är nära varandra går det inte att följa kraven för storlek och utrymme utan att visa felaktig kartinformation.

Läs mer om riktlinje 2.5.8 på W3Cs webbplats