2.5.8
Klickytans storlek (minimum)
Ibland behöver användare klicka på knappar, länkar och andra interaktiva saker. Men vad händer om dessa saker är för små och svåra att träffa? För människor med motorisk nedsättning eller problem med 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.
Kraven
Riktlinjen definierar krav på storlek för klickytor och utrymme 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 x 24 CSS-pixlar stor. Man ska kunna rita en 24 x 24 CSS-pixlar stor kvadrat och den ska helt få plats innanför klickytan.
Dessa två knappar har en 24 x 24 CSS-pixlar stor kvadrat centrerad i knappens mitt. Den vänstra har kvadraten helt innanför knappen och följer därför storlekskravet. Den högra knappen är mindre och rutan går ut utanför knappen. Detta följer inte storlekskravet.
Utrymme
Om klickytan är mindre än 24 x 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. Om cirkeln inte kolliderar med något annat klickbart elements cirkel så är det godkänt.
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 cirklarna inte kolliderar i något annat.
Undantag
- Om funktionen kan åstadkommas med en annan kontroll på sidan.
- Om klickytan är 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 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 där man har många ”nålar” som visar var någonting är nära varandra. Då kan man inte följa kraven för storlek och utrymme utan att visa fel kartinformation.
Testa riktlinjen
För manuell kontroll av storleken på klickytor finns 24×24 Pixel Cursor Bookmarklet som gör att din mus blir en 24 x 24 pixlar stor ruta. Med den kan man jämföra klickytor och se om hela rutan får plats.
Det finns även target size checker som automatiskt går igenom sidan och markerar alla klickytor och visar tydligt om de överlappar varandra.
Läs mer om riktlinje 2.5.8 på W3C webbplats