Billentyűzetes navigáció és fókusz: az üzleti weboldal alappróbája

Értelmes elemek

A kattintható doboz nem feltétlenül rendelkezik gombhoz vagy linkhez tartozó viselkedéssel. A művelethez megfelelő natív HTML-elemet válassz.

A natív HTML-elem a várható szemantikát és sok alapvető viselkedést ad. A másik oldalra vezető művelethez link, az aktuális felület műveletéhez gomb illik. Egy kattintható div nem kap automatikusan mindent, amit ezek a vezérlők biztosítanak. Ha mégis egyedi megoldás szükséges, a szerepet, fókuszt és billentyűműködést teljes körűen pótolni kell. A látvány önmagában nem teszi az elemet kezelhetővé. A link szövege mondja el a célt, a gombé a műveletet. A letiltott és aktív állapot is következetes legyen. A natív alapok használata csökkentheti a saját hibalehetőséget, miközben a márkához illeszkedő vizuális megjelenés továbbra is kialakítható körülöttük. A vezérlő alapvető billentyűzetes működése kiszámítható.

Látható fókusz

A fókuszjelző eltüntetése tájékozódás nélkül hagyhatja a felhasználót. Tervezz jól látható jelzést minden tényleges háttéren.

A fókuszjelző segít felismerni, melyik elem aktiválódik a következő műveletre. Eltüntetése különösen hosszú navigációban teszi bizonytalanná a használatot. A jelzés minden háttéren legyen látható, ne csak a fehér alapállapotban. A körvonalat ne vágja le kártya vagy rejtett túlcsordulás. A fókusz és egér fölé vitel eltérő állapot, ezért az egyik megtervezése nem helyettesíti a másikat. A billentyűzetes használó számára a rögzített fejléc is eltakarhatja a fókuszált célpontot, ezt külön figyeld. A próba során haladj végig az oldalon egér nélkül, és minden lépésnél mondd meg, hol jársz. Ha ez nem világos, a vizuális jelzés vagy görgetési viselkedés javításra szorul. A billentyűzetes használó mindig felismeri az aktuális célpontot.

Logikus sorrend

A vizuális átrendezés és programozott sorrend eltérhet. Járd végig a tabulátoros bejárást és vesd össze a tartalmi logikával.

A DOM sorrend és vizuális elrendezés összhangja fontos. A CSS-sel átrendezett oszlopok más sorrendet mutathatnak szemmel, mint billentyűzettel vagy képernyőolvasóval. A bejárás ne ugráljon érthetetlenül a képernyő távoli részei között. A pozitív tabindex értékekkel összerakott egyedi sorrend könnyen nehezen karbantarthatóvá válik, ezért inkább a szerkezetet rendezd helyesen. A rejtett, nem aktív tartalom ne maradjon észrevétlen célpont. A kihagyott elemnek viszont legyen értelmes oka: egy fontos interaktív vezérlőt nem szabad kivenni a bejárásból pusztán vizuális megfontolásból. A logikus sorrendet különböző reszponzív nézetekben is nézd meg, mert mobilon a kompozíció megváltozhat. A tartalom értelmi rendje legyen az alap. A fókusz értelmezhető sorrendben halad.

Menü és párbeszéd

A nyitott felület fókuszkezelése eltérő, célzott szabályokat kíván. Tervezd meg a nyitás, bezárás, kilépés és visszatérés viselkedését.

A párbeszédablak és összetett menü nyitásakor a fókusz megfelelő helyre kerüljön, bezáráskor pedig kiszámíthatóan térjen vissza. A háttér és aktív panel viszonyát a komponens típusa alapján kell kezelni, az aktuális hozzáférhetőségi mintákat követve. A bezárási lehetőség billentyűzettel is elérhető legyen. A felhasználó ne ragadjon olyan csapdában, amelyből csak egérrel tud kilépni. A nyitógomb állapota és a panel tényleges láthatósága egyezzen. Az animált bezárás külön figyelmet kívánhat, mert a vizuálisan eltűnő tartalom rövid ideig még aktív maradhat. A tesztben többszöri nyitás, gyors bezárás és másik műveletre váltás is szerepeljen. A kezelőfelület átmeneti állapotaiban is meg kell őrizni a tájékozódást. A felhasználó nem ragad bent és nem veszti el a helyét.

Átugrás és szerkezet

A sok ismétlődő navigáció minden oldalon fölösleges munkát okozhat. Adj a fő tartalomra vezető megoldást és szemantikusan rendezett szakaszokat.

Az ismétlődő navigáció átugrása sok oldalon jelentős segítség. A fő tartalomhoz vezető link fókuszba kerülve legyen látható és ténylegesen a megfelelő helyre vigyen. A szemantikus fő régió és címsorok további tájékozódási lehetőséget adnak segítő technológiával. A régiónevek és címszintek a tartalmi kapcsolatot tükrözzék, ne pusztán a vizuális méretet. Hosszú tudástári oldalon a tartalomjegyzék is segíthet, ha működő célpontokra mutat. A fókusz áthelyezése és görgetés viszonya külön ellenőrzendő: a lap odagördülése nem mindig jelenti, hogy a billentyűzetes bejárás is onnan folytatódik. A szerkezeti segítségek célja, hogy a látogatónak ne kelljen minden oldalon ugyanazt a hosszú fejlécet újra végigjárnia. A látogató közvetlenül elérheti az oldal lényegi részét.

Teljes feladat próba

Az egyes gombok ellenőrzése nem bizonyítja a teljes folyamat használhatóságát. Végezz el menüből induló kapcsolatfelvételt vagy termékválasztást kizárólag billentyűzettel.

A teljes feladatpróba többet mond, mint az elemek külön vizsgálata. Indulj a fő navigációból, keresd meg a szolgáltatást, nyisd meg a kapcsolódó információt, majd tölts ki és küldj el egy tesztűrlapot kizárólag billentyűzettel. Webshopnál a szűrő és változatválasztás is lehet a lánc része. Figyeld a fókusz láthatóságát, sorrendjét és megőrzését visszalépéskor. Egyetlen kezelhetetlen egyedi vezérlő az egész folyamatot megakaszthatja. A próba nem helyettesít teljes akadálymentességi auditot, de fontos, megismételhető alapellenőrzés. A feltárt hibát konkrét lépéssel és elvárt működéssel írd le. A javítás után az érintett folyamat egészét ismételd meg, mert a komponensek közötti átmenetnél is keletkezhet új probléma. A feladat megszakítás és egérre váltás nélkül befejezhető.

Szemléltető helyzet és gyakorlati munkalap

Szemléltető példa: a mobilmenü billentyűzetről megnyitható, de bezárás után a fókusz egy rejtett linkben marad. A javítás a nyitó gombhoz vezeti vissza a fókuszt, és zárt állapotban a rejtett tartalom nem része a bejárásnak. A vizuális és működési állapot így összhangba kerül.

Gyakori kérdések