Focus state
A focus state vizuálisan jelzi, mely interaktív elem kapta meg a billentyűzetes fókuszt. A felhasználó ebből tudja, melyik kontroll fog reagálni a következő billentyűparancsra.
Röviden
A focus state vizuálisan jelzi, mely interaktív elem kapta meg a billentyűzetes fókuszt. A felhasználó ebből tudja, melyik kontroll fog reagálni a következő billentyűparancsra.
Vizuálisan
A fókuszállapot mutatja, melyik elem kapja a következő billentyűműveletet
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
outline: none
Mentés
Mégse
Hol van a fókusz?
A billentyűzetet használó felhasználó elveszíti a helyzetét, mert nincs vizuális jel arra, melyik kontroll aktív.
✓
HELYES IRÁNY
Jól látható, nem kizárólag színre épülő fókusz
Mentés
Mégse
A fókuszgyűrű kontrasztos, következetes és nem változtatja meg félreérthetően a komponens jelentését.
Mit jelent a focus state?
A focus state vizuálisan jelzi, mely interaktív elem kapta meg a billentyűzetes fókuszt. A felhasználó ebből tudja, melyik kontroll fog reagálni a következő billentyűparancsra.
Ha a fókusz láthatatlan vagy sticky header, overlay mögé kerül, a billentyűzetes navigáció gyakorlatilag elveszíti a kontextusát.
A legfontosabb alapelvek
- A focus indicator legyen jól látható.
- Ne távolítsd el pótlás nélkül az outline-t.
- A fókuszált elem ne legyen teljesen kitakarva.
- Focus és hover ne feltétlen ugyanaz.
Gyakorlati példa
Egy 2–3px kontrasztos focus ring a gomb körül tisztán jelzi az aktuális pozíciót úgy, hogy a mouse hover stílustól is megkülönböztethető.
Látható fókuszjelző billentyűzetes használatnál
Nincs fókusz
Fókuszban
Gyakori hibák
- outline: none alternatíva nélkül.
- Csak nagyon halvány box-shadow.
- Sticky footer eltakarja a fókuszált mezőt.
Hogyan alkalmazd a saját felületeden?
Ne izolált szabályként kezeld a témát. A focus state 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 focus state?
Ha a fókusz láthatatlan vagy sticky header, overlay mögé kerül, a billentyűzetes navigáció gyakorlatilag elveszíti a kontextusát.
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.