Mi romlott el a billentyűzettel történő kezelésben
A billentyűzettel történő kezelésben elkövetett legelterjedtebb hiba az, hogy az interaktív elemek ugyan láthatóak, de a Tab billentyűvel nem érhetőek el. Gondoljunk egy olyan menüre, amely csak egérkattintásra nyílik meg, egy olyan gombra, amely nem kap fókuszt, vagy egy előugró ablakra, amely egér nélkül nem zárható be. Az olyan emberek számára, akik motorikus korlátok miatt nem tudnak egeret használni, vagy egy képernyőolvasót kezelnek, amely a billentyűzetnavigációra támaszkodik, ez azt jelenti, hogy a webhely egy része egyszerűen használhatatlan.
Az ok szinte mindig az egyedi komponensekben keresendő: a fejlesztő szép legördülő menüt, egyéni dátumválasztót vagy kinyitható szűrőt készít saját HTML-lel és JavaScripttel, de közben elfelejti azt a billentyűzettámogatást, amelyet egy szabványos HTML-gomb vagy -hivatkozás ingyen biztosít. Az elem jól néz ki, és egérrel működik, ezért a tesztelés során senki nem veszi észre, hogy a Tab billentyű egyszerűen átugrik rajta.
Miért szokott ez gyakran elkerülni a figyelmet
Ez a hiba azért makacsnak bizonyul, mert puszta szemmel nem szembetűnő. Aki egérrel kattintgat egy webáruházon, sehol nem lát problémát. Csak akkor válik láthatóvá, ahol a navigáció elakad, ha az egeret elképzeljük, és csak a Tab, Shift+Tab, Enter és a nyílbillentyűk segítségével mozgunk az oldalon keresztül. Mivel az ilyen tesztelés ritkán része a szokásos átadási folyamatnak, a probléma gyakran évekig észrevétlen marad – amíg egy látogató vagy egy felügyeleti hatóság nem szenved rá.
Egy második ok az, hogy számos ilyen hiba éppen azokon a helyeken fordul elő, amelyek a legszembetűnőbbek az egér használatakor: a pénztári lépésnél, a bejelentkezési képernyőnél, egy keresési szűrőnél. Ezek pontosan azok az elemek, amelyeket gyakran az oldal többi részétől függetlenül építenek meg saját komponensekkel, amelyek nem minden esetben kapják meg ugyanannyi gondot, mint a fő navigáció.
Hogyan lehet ezt saját magadnak felismerni
Az első ellenőrzés egyszerű: dobd el az egeret, és csak billentyűzettel végigmegyél egy oldal munkafolyamatán. Figyelj három dologra: minden kattintható elem elérhető-e a Tab billentyűvel, minden pillanatban egyértelmű-e, hogy melyik elemnek van fókusza, és minden megnyitható elem – egy menü, szűrő, előugró ablak – bezárható-e egér nélkül is. Ha a fókusz egy előugró ablakban elakad, váratlan helyre ugrik, vagy teljesen eltűnik a képből, ez egy jele annak, hogy munka vár rád.
Az automatizált scan felismerni tudja ezen problémák egy részét, például a hiányzó fókusz-jelzéseket vagy az olyan elemeket, amelyekhez nincs billentyűzet-hozzáférés, de ezek a forráskódban technikailag felismerhetőek. Hogy egy legördülő menü logikusan és előreláthatóan is használható-e, azonban azt egy scan nem tudja teljes mértékben felmérni – ez végső soron egy emberi tesztfeladat marad. Ez egyébként több WCAG-követelményre is igaz, és mi ezt minden jelentésben megemlítjük. indítsd el a saját fontos oldalaid ingyenes quick-scan vizsgálatát hogy lássad, az ilyen típusú problémák melyik részét ismeri fel automatikusan.
Hogyan lehet ezt megelőzni
A megoldás általában nem abban rejlik, hogy extra technológiát rakunk a webhelyre, hanem hogy helyesen használjuk a meglévő építőelemeket. A szabványos HTML-gomb vagy -hivatkozás természetből érkezésre alkalmas a Tab billentyűvel, és működtethető az Enter billentyűvel; aki egy szöveg- vagy képrészletet JavaScripttel kattinthatóvá tesz, annak saját magának kell hozzáadnia a billentyűzet-támogatást. Az egyéni komponenseknél – menük, szűrők, előugró ablakok – egyértelmű megállapodás szükséges a fejlesztővel: minden elemnek nyithatónak, kezelhetőnek és zárhatónak kell lennie billentyűzettel, és a fókusznak láthatónak és előreláthatónak kell maradnia.
Az, ami nem segít, az egy akadálymentesítési widget, amely azt állítja, hogy ez a fajta hibákat egy szabad script segítségével javítja. Ilyen overlay nem változtat az alapul szolgáló kódon, és ezért nem változtat a tényleges kezelhetőségen sem; a törvény egy akadálymentes webhelyet követel meg, nem egy rétegzett megoldást felette. Tudatosan nem árusítunk ilyen widgeteket.
Szeretné tudni, hogy webhelye vagy alkalmazása mely részei tartalmaznak ilyen szerkezeti hibákat, és ez mennyire jelentős súlyú a fejlesztési terv prioritási listájában? Az ismeretbázisban témánként az egyes hibajelenségekről olvashat, és hogyan jön létre pontosan a szűrésünk ezt megtudhatja, amely része történik automatikusan, és melyik rész igényel manuális figyelmet.
Még kérdése van arról, hogy mely követelmények tartoznak vagy nem tartoznak ide, vagy a szűrési keretrendszer többi részéről? A gyakran feltett kérdésekre adott válaszok erre a legtöbb esetben már választ adnak.
Az axessia.eu ingyenes gyors szűrése azonnal jelzést ad arról, hogy ilyen billentyűzeti problémák előfordulnak-e az Ön webhelyén, ehhez nem szükséges fiók.