Billentyűzetes navigáció: 5 perces önteszt és javítás

Röviden

• Minden, ami egérrel működik, működjön billentyűzettel is (WCAG 2.1.1, A szint), és a fókusz mindig látsszon (WCAG 2.4.7).
• Billentyűzettel böngészik, aki remegő kézzel vagy egy kézzel nem tud egeret használni; aki vak, és képernyőolvasót használ, mert azt is billentyűzetről vezérli; és akinek a segédeszköze (kapcsoló, szájpálca) billentyűzetként működik.
• A leggyakoribb hibák: láthatatlan fókusz, csak egérrel nyíló menü, felugró ablak, amelyből nem lehet kijutni, és gombnak látszó, de billentyűzettel elérhetetlen elemek. saját 2026-os felmérésünk során az EqualVia fókuszellenőrzése a vizsgált 116 magyar webshop 30%-ának főoldalán talált olyan elemet, amelyen nem látszott a billentyűzetfókusz. Ezt az ingyenes, axe-alapú eszközök nem mérik.
• Az alábbi teszthez nem kell szakértelem, csak egy billentyűzet és öt perc.

Melyik billentyű mit csinál

• Tab, illetve Shift+Tab: a következő, illetve az előző linkre, gombra vagy mezőre lép.
• Enter: követi a linket, megnyomja a gombot.
• Szóköz: megnyomja a gombot, bejelöli a jelölőnégyzetet; máshol görget.
• Nyilak: a választógombok, a legördülő lista, a fülek és a csúszka értékei között mozog.
• Esc: bezárja a felugró ablakot és a lenyíló menüt.

Macen előbb egy beállítás

A Safari alapbeállítással nem lép a linkekre a Tab billentyűvel. A teszt előtt a Safari beállításainak Haladó lapján kapcsolja be, hogy a Tab a weboldal minden elemét kiemelje, a macOS Rendszerbeállításaiban pedig a Billentyűzet résznél a billentyűzetes navigációt. Enélkül hibának látszhat az is, ami nem az. Windowson a Chrome, az Edge és a Firefox alapbeállítással is jó.

Az 5 perces önteszt

1. Az első Tab (30 másodperc)

Töltse be a főoldalt, kattintson a böngésző címsorába, majd nyomja meg a Tabot. Az első elem egy „Ugrás a tartalomra” link legyen, amely Enterre a fő tartalomhoz visz (WCAG 2.4.1). E nélkül minden oldalon végig kell lépkedni a teljes menün.

2. Fejléc és menü (1 perc)

• Minden lépésnél látszik, hol van a fókusz?
• A lenyíló menü kinyílik Enterre vagy Szóközre, és bezáródik Esc-re?
• Ha a fókusz néhány Tab-lenyomásra „eltűnik”, valószínűleg rejtett elemeken jár, például az asztali nézetben elrejtett mobilmenün.

3. Felugró ablakok (1 perc)

• A sütisáv gombjai elérhetők, és billentyűzettel is el lehet fogadni vagy utasítani a sütiket?
• A hírlevél-ablak bezárható Esc-re vagy a bezáró gombbal?
• Modális ablaknál az a jó, ha a fókusz benne marad, amíg nyitva van, bezárás után pedig visszakerül oda, ahol előtte volt.
• Hiba viszont, ha valahonnan semmilyen módon nem lehet kijutni (beragadás, WCAG 2.1.2), például egy beágyazott chatből, videólejátszóból vagy térképből.

4. Termékoldal (1 perc)

• Kiválasztható a méret és a szín, és módosítható a mennyiség?
• Lapozható a galéria, és látszik a fókusz a lapozó gombokon?
• Kosárba tehető a termék, és kiderül, hogy bekerült?

5. Kosár, pénztár, fizetés (1,5 perc)

• Módosítható a mennyiség, és törölhető a termék?
• Kitölthető minden mező, választható szállítási és fizetési mód, és a csomagpont térkép nélkül is kiválasztható?
• Bejelölhető az ÁSZF elfogadása, és eljut a fizetési oldalig, majd azon is végig?

Közben figyelje, hogy a fókusz sorrendje kövesse az oldal olvasási sorrendjét (WCAG 2.4.3), és hogy a ragadós fejléc, a chatgomb vagy a sütisáv ne takarja ki a fókuszban lévő elemet (WCAG 2.4.11). Jegyezze fel dátummal, mit talált: ez is része a kézi ellenőrzés dokumentálásának.

Tipikus hibák és javításuk

Ez a rész a fejlesztőnek vagy a sablon készítőjének szól, elég, ha továbbítja neki.

• Eltüntetett fókuszkeret. Sok sablon az „outline: none” CSS-szabállyal kikapcsolja a böngésző fókuszkeretét. Javítás: a :focus-visible állapotra legyen jól látható keret, például 2 pixel vastag vonal, amely a háttérhez képest legalább 3:1 kontrasztú (WCAG 1.4.11). Mérés: színkontraszt.
• Gombnak látszó div vagy span. Kattintásra működik, de Tabbal nem érhető el, és Enterre sem reagál. Javítás: valódi button vagy a elem, ezek alapból fókuszálhatók és kezelhetők billentyűzettel.
• Csak egérrel nyíló menü. Az almenü csak rámutatásra nyílik ki. Javítás: nyíljon Enterre vagy Szóközre is egy gombbal, amely az aria-expanded attribútummal jelzi, hogy nyitva van-e, és záródjon Esc-re.
• Felugró ablak fókusz nélkül. Megnyitáskor a fókusz a háttérben marad, a felhasználó a letakart oldalon lépked. Javítás: megnyitáskor a fókusz kerüljön az ablakba, amíg nyitva van, maradjon benne, Esc zárja be, bezárás után pedig a fókusz térjen vissza a megnyitó gombra. A natív dialog elem showModal() metódusa ennek nagy részét elvégzi.
• Rejtett, de fókuszálható elemek. A képernyőn kívülre tolt mobilmenü vagy a slider rejtett diái Tabbal elérhetők. Javítás: elrejtéskor display: none vagy visibility: hidden, illetve az inert attribútum.
• Pozitív tabindex. A tabindex="1" és a hasonló értékek felborítják a sorrendet. Javítás: a forráskód sorrendje adja a fókusz sorrendjét, a tabindex értéke csak 0 vagy -1 legyen.
• Azonnal újratöltő lista. Ha a „Rendezés” vagy a „Termékek oldalanként” lista választásra rögtön újratölti az oldalt, egyes böngészőkben már a nyílbillentyű is újratöltést indít, és nem lehet eljutni a kívánt lehetőségig. Javítás: külön „Alkalmaz” gomb, vagy előzetes figyelmeztetés (WCAG 3.2.2).
• Beragadó külső elemek. Chat-, értékelő- és videó-widgetek, beágyazott térképek. Ha a fókusz nem jut ki belőlük, jelezze a szolgáltatónak, vagy cseréljen eszközt.

Mit talál meg az automatikus vizsgálat

Az automatikus vizsgálat a billentyűzetes hibák egy részét megtalálja. Az EqualVia valódi Tab-lenyomásokkal ellenőrzi, látszik-e a fókusz a linkeken, a gombokon és a mezőkön, és hogy nem ragad-e be a fókusz az oldal egy részén, például egy sütisávban vagy egy beágyazott lejátszóban. Azt viszont csak ember tudja eldönteni, logikus-e a sorrend, kinyílik-e a menü, és végig lehet-e menni a teljes vásárláson. Ehhez való a fenti teszt. Fiókkal az EqualVia irányított kézi ellenőrzései között a billentyűzetes használat, a fókusz sorrendje és a felugró ablakok is szerepelnek.

További lépések: 30 perces kézi ellenőrzés, akadálymentes webshop ellenőrzőlista, akadálymentes űrlapok.

Ez az útmutató technikai segítség, nem jogi tanácsadás.