Webshop tesztelése csak billentyűzettel: a teljes vásárlási út

Mit bizonyít egy billentyűzetes próba?

Az egérrel könnyen kezelhető webshop nem feltétlenül működik billentyűzettel. A menü rámutatásra nyílhat, a szűrő kattintható szövegként viselkedhet, a kosárablak pedig elnyelheti a fókuszt. Ezeket a hibákat a vásárlási út végigjárása sokszor gyorsabban megmutatja, mint a forráskód puszta olvasása.

A billentyűzetes teszt önálló vizsgálati réteg. Nem helyettesíti a képernyőolvasós tesztet: attól, hogy a Tab eljut egy gombhoz, a gomb neve még lehet értelmezhetetlen. Az automatikus vizsgálat sem helyettesíti, mert a helyes sorrendet és egy összetett interakció működését nem lehet pusztán elemjelenlét alapján megítélni.

Kezdjen friss oldalletöltéssel, ismert böngészőben. Jegyezze fel a böngészőt, az oldalt, a tesztterméket és az állapotot. A pénztárhoz használjon tesztkörnyezetet vagy előre egyeztetett rendelési eljárást; ne indítson véletlenül valódi fizetést.

A kereséstől a rendelési összesítőig

Az első Tab után keresse a tartalomra ugró linket, majd a fejléc vezérlőit. A fókusznak minden lépésben követhetőnek kell maradnia. A menü használatánál az Enter vagy Szóköz általában aktiválja a gombot; az összetett vezérlők nyílbillentyűs működését a választott interakciós minta szerint vizsgálja.

A kategóriaoldalon próbálja ki a szűrést és rendezést. Az eredmények változása után ne ugorjon a fókusz indokolatlanul a dokumentum elejére. A termékoldalon ellenőrizze a variációválasztást, a mennyiséget és a kosárba helyezést. Ha kosárpanel nyílik, legyen elérhető a bezárása, és a fókusz bezárás után térjen vissza egy logikus pontra.

A pénztárban járja végig a mezőket, a szállítási és fizetési lehetőségeket, valamint a hozzájáruló jelölőnégyzeteket. Szándékosan hagyjon ki egy kötelező mezőt. A hiba után is lehessen megtalálni és javítani az érintett adatot, majd újra eljutni a rendelés véglegesítéséhez.

• Fejléc, keresés és főmenü
• Szűrők, rendezés és terméklinkek
• Termékváltozat, mennyiség és kosárgomb
• Kosárpanel, mennyiségmódosítás és törlés
• Pénztármezők, hibák, szállítás és fizetés
• Rendelési összesítő és véglegesítő gomb

Látható fókusz és valódi fókuszcsapda

Ha nem látja, hol jár, a felület ugyanúgy használhatatlan lehet, mintha egy gomb kimaradna a Tab-sorrendből. A fókuszjelzés ne csak egy apró színváltozás legyen, és ne tűnjön el a rögzített fejléc vagy sütiablak mögött. Nézze meg világos és sötét felületen is.

Egy valódi modális párbeszédablaknál helyes, hogy a Tab az ablakon belül marad, amíg az nyitva van. Ez nem azonos a hibás fókuszcsapdával. A különbség a kilépés: legyen billentyűzettel kezelhető bezárás, a mintának megfelelő Escape-viselkedés, majd értelmes fókuszvisszaadás.

Fejlesztőknek: a szemantika legyen az alap

Művelethez használjon button elemet, navigációhoz hivatkozást. Egy kattintható div tabindex értékkel még nem kapja meg automatikusan a natív gomb teljes billentyűzetes viselkedését. A pozitív tabindex értékekkel létrehozott külön sorrend nehezen tartható karban; a dokumentum logikus sorrendje általában biztonságosabb alap.

Javítás után ugyanazt a lépéssort ismételje meg. A hibajegyben ne csak az szerepeljen, hogy »nem működik«, hanem az induló állapot, a billentyűsor, a tényleges és az elvárt eredmény. Ez teszi a hibát reprodukálhatóvá és az utóellenőrzést érdemivé.

<button type="button" aria-expanded="false" aria-controls="szurok">
  Szűrők
</button>
<div id="szurok" hidden>…</div>

/* A nyitott állapotot és a hidden értéket együtt frissítse. */
button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }