Kattintható terület mérete
A target size az interaktív elem ténylegesen kattintható vagy érinthető területének mérete. A WCAG 2.2 AA Target Size (Minimum) követelménye általánosan legalább 24×24 CSS pixeles célterületet vagy megfelelő kivételi spacinget ír le; az Enhanced AAA kritérium 44×44 CSS pixelt céloz.
Röviden
A target size az interaktív elem ténylegesen kattintható vagy érinthető területének mérete. A WCAG 2.2 AA Target Size (Minimum) követelménye általánosan legalább 24×24 CSS pixeles célterületet vagy megfelelő kivételi spacinget ír le; az Enhanced AAA kritérium 44×44 CSS pixelt céloz.
Vizuálisan
A látható ikon és a kattintható terület nem ugyanaz
Ugyanazt a helyzetet kétféleképp nézd meg: először a tipikus hibát, utána azt a megoldást, amelyik jobban támogatja a felhasználó feladatát.
×
GYAKORI HIBA
20×20 px ikon = 20×20 px célterület
×
apró célpont
A kis célpont nagy pontosságot kér, ezért könnyebb mellényomni, különösen mobilon.
✓
HELYES IRÁNY
Az ikon körül nagyobb interakciós terület van
×
nagyobb célterület
A vizuális elem maradhat kicsi, miközben a teljes kattintható célterület kényelmesebb és megbocsátóbb.
Mit jelent a kattintható terület mérete?
A target size az interaktív elem ténylegesen kattintható vagy érinthető területének mérete. A WCAG 2.2 AA Target Size (Minimum) követelménye általánosan legalább 24×24 CSS pixeles célterületet vagy megfelelő kivételi spacinget ír le; az Enhanced AAA kritérium 44×44 CSS pixelt céloz.
Kis ikonok és sűrű kontrollok érintőképernyőn növelik a félrekattintás esélyét. A vizuális ikon lehet kisebb, miközben a gomb hit area-ja nagyobb.
A legfontosabb alapelvek
- AA minimumot és spacing kivételeket pontosan értelmezd.
- Mobilon célozz kényelmesebb, gyakran 40–48px körüli kontrollokra.
- A veszélyes akciók ne legyenek túl közel.
- A teljes vizuális gomb legyen target.
Gyakorlati példa
Egy 18px-es ikon körül 44×44px gombterület kényelmesebb lehet, miközben maga az ikon nem válik aránytalanul naggyá.
24px minimum kritérium és nagyobb kényelmi target
×
20×20
×
44×44 target
Gyakori hibák
- Ikon méretét összekeverni target size-zal.
- Apró pagination számok spacing nélkül.
- Csak mouse pointerrel tesztelni.
Hogyan alkalmazd a saját felületeden?
Ne izolált szabályként kezeld a témát. A kattintható terület mérete akkor működik jól, ha a felhasználó céljával, a tartalom fontossági sorrendjével és a teljes felület többi döntésével együtt vizsgálod.
Teszteld valós feladattal: adj a felhasználónak konkrét célt, figyeld meg, hol bizonytalanodik el, mit ért félre, és mely pontokon kell indokolatlanul gondolkodnia. A jó UI/UX döntés nem attól jó, hogy látványos, hanem attól, hogy kiszámíthatóbbá és könnyebbé teszi a feladat elvégzését.
A vizuális minőség és a használhatóság nem egymás ellenfelei. A jó felület mindkettőt ugyanannak a felhasználói célnak rendeli alá.
Gyakorlati accessibility ellenőrzés
Az automata accessibility scanner hasznos első szűrő, de nem elég. Menj végig az oldalon csak billentyűzettel, ellenőrizd a fókuszsorrendet és fókuszjelzőt, zoomolj, próbáld megérteni a formot vizuális színjelzések nélkül, és ahol lehet, tesztelj képernyőolvasóval is.
A WCAG sikerességi kritériumai mérhető minimumokat adnak, de a megfelelés nem automatikusan jelent kiváló UX-et. Egy technikailag szabályos kontroll továbbra is lehet félreérthető vagy nehézkes, ezért a szabványellenőrzést használhatósági teszttel érdemes kiegészíteni.
- Tabbal minden funkció elérhető-e
- látható és nem kitakart-e a fókusz
- szín nélkül is érthetők-e az állapotok és hibák
- zoom és nagyított szöveg mellett is használható-e a felület
Gyakori kérdések
Miért fontos a kattintható terület mérete?
Kis ikonok és sűrű kontrollok érintőképernyőn növelik a félrekattintás esélyét. A vizuális ikon lehet kisebb, miközben a gomb hit area-ja nagyobb.
Mikor érdemes tesztelni?
Már korai wireframe vagy prototípus szinten is. Minél később derül ki egy alapvető használhatósági probléma, annál drágább lehet a javítása.
Források és további olvasnivaló
Az accessibility és usability állításoknál elsődleges szabványokra és bevett szakmai forrásokra támaszkodj; a konkrét interface-döntéseket pedig mindig a saját felhasználói kontextusodban teszteld.