Billentyűzetes navigáció
A billentyűzetes navigáció lehetővé teszi, hogy a felület interaktív elemei egér nélkül, például Tab, Shift+Tab, Enter, Space és nyílbillentyűk segítségével használhatók legyenek.
Röviden
A billentyűzetes navigáció lehetővé teszi, hogy a felület interaktív elemei egér nélkül, például Tab, Shift+Tab, Enter, Space és nyílbillentyűk segítségével használhatók legyenek.
Vizuálisan
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
A fókusz ugrál vagy interaktív elem kimarad
1 Név
4 Email
2 Mégse
3 Mentés
A DOM-sorrend és a vizuális sorrend eltér, ezért Tab használatakor nehéz követni, hol jár a felhasználó.
✓
HELYES IRÁNY
A fókuszsorrend követi a tartalom logikáját
1 Név
2 Email
3 Mentés
4 Mégse
Minden interaktív elem elérhető, a sorrend kiszámítható, és Enter/Space a várható műveletet végzi.
Mit jelent a billentyűzetes navigáció?
A billentyűzetes navigáció lehetővé teszi, hogy a felület interaktív elemei egér nélkül, például Tab, Shift+Tab, Enter, Space és nyílbillentyűk segítségével használhatók legyenek.
Ez nem csak képernyőolvasó felhasználóknak fontos. Motoros korlátozással, alternatív input eszközzel vagy egyszerűen gyors billentyűzetes munkával is alapvető.
A legfontosabb alapelvek
- Logikus fókuszsorrend.
- Minden interaktív funkció legyen elérhető.
- Ne legyen keyboard trap.
- A natív kontrollok billentyűviselkedését tartsd meg.
Gyakorlati példa
Egy modal megnyitásakor a fókusz a dialogba kerül, azon belül marad a feladat alatt, bezáráskor pedig visszatér a megnyitó gombra.
Tab sorrend és interaktív fókusz
Tab
Focus
Enter / Space
Következő kontroll
Gyakori hibák
- Pozitív tabindex értékekkel kézzel újrarendezni mindent.
- Focus outline eltávolítása.
- Hover menü billentyűzetes alternatíva nélkül.
Hogyan alkalmazd a saját felületeden?
Ne izolált szabályként kezeld a témát. A billentyűzetes navigáció 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 billentyűzetes navigáció?
Ez nem csak képernyőolvasó felhasználóknak fontos. Motoros korlátozással, alternatív input eszközzel vagy egyszerűen gyors billentyűzetes munkával is alapvető.
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.