Szaktanácsadás akadálymentes honlap készítéséhez

A billentyűfókusz és a képernyőolvasó fókusz különbségei

A cikk témái

Amikor az akadálymentesség kapcsán billentyűzettel navigáló felhasználókról beszélünk, akkor nagyon leegyszerűsítve két felhasználói csoportra gondolunk:

  • Azokra a látó felhasználókra, akik valamilyen oknál fogva (például kézremegéssel járó betegség miatt) nem használnak egeret.
  • Azokra a vak és gyengénlátó felhasználókra, akik azért nem használnak egeret, mert az egérkurzort nem látják vagy nehezen tudják nyomon követni.

E két felhasználói csoport billentyűzetes navigációja messze nem egyforma. A navigációban rejlő különbségek gyökere a látásból, illetve annak hiányából adódik.

A látó felhasználók billentyűzetes navigációja

Amikor egy látó, de kizárólag billentyűzettel navigáló felhasználó megnyit egy weboldalt, akkor azonnal látja és el tudja olvasni az oldal tartalmának azon részét, ami a képernyőjén egyszerre megjelenik. Szerencsés esetben akár rögtön (vagyis a billentyűzet használata nélkül) is hozzájuthat ahhoz az információhoz, amiért az oldalt meglátogatta. Ha a keresett információ mégis lejjebb lenne az oldalon, akkor a , a Szóköz vagy a Page Down billentyű megnyomásával görgethet lefelé. Az End billentyűvel akár rögtön az oldal legalját is megnézheti. Felfelé a , a Page Up billentyűvel, vagy a Shift és a Szóköz billentyű együttes megnyomásával görgethet. A Home billentyűvel újra az oldal tetejét láthatja.

Fontos, hogy az említett billentyűlenyomások még nem mozgatják a billentyűfókuszt. Kizárólag vizuális görgetés történik.

Valószínűsíthető, hogy az említett felhasználó a görgetésen túl valamilyen egyéb interakciót is szeretne végrehajtani az oldalon. Például használna egy linket, vagy beírna egy űrlapmezőbe. Ehhez azonban előbb „meg kell mutatnia”, hogy melyik elemre gondol. Ez az egeres navigációnál is így történik, hiszen ott is oda kell vinni az egérkurzort arra az elemre, amelyikre kattintani szeretnénk. A nagy különbség azonban az, hogy míg az egérmutatót bármikor szabadon mozgathatjuk az oldalon, addig a „billentyűzetmutató”, vagyis a billentyűfókusz mozgatása egy sokkal kötöttebb, szigorúan lineáris tevékenység.

A billentyűfókusz a Tab billentyűvel mozgatható előre, a Shift és a Tab billentyű együttes lenyomásával pedig visszafele. Nagyon fontos, hogy a billentyűfókusz csak a fókuszálható elemekre lép rá, melyek alapesetben kizárólag az interaktív elemek (például a linkek, a gombok, vagy a űrlapmezők). Ez teljesen logikus is, hiszen ne feledjük, a felhasználó azért lépteti a billentyűfókuszt, hogy „megmutasssa”, melyik elemmel szeretne majd interakcióba lépni. Egy látó felhasználó nem azért lépteti a billentyűfókuszt, hogy elolvassa a fókuszált elemet.

Ebből következik, hogy a billentyűzetes felhasználói élmény szempontjából kifejezetten zavaróak lehetnek a felesleges Tab-megállók. Vagyis azok a helyzetek, amikor a billentyűfókusz mozgatása közben egy nem interaktív elemre is rá lehet lépni. Például nemrég találkoztam egy ehhez hasonló kóddal:

<p tabindex="0">Telefonszám: +36-1-123-4567</p>

A <p> jelölőelem alapból nem egy interaktív elem, tehát a billentyűfókusszal sem lehet rálépni. A 0 értékű tabindex attribútum miatt azonban mégis fókuszálhatóvá vált. A konzultációk során kiderült, hogy a fejlesztők azért alkalmazták ezt a megoldást, mert tévesen úgy gondolták, hogy a vak felhasználók is csak a Tab billentyű nyomkodásával navigálnak az oldalon, vagyis muszáj, hogy a telefonszámot is elérjék. Azon túl, hogy eleve téves volt a feltételezésük, még a látó, de billentyűzettel navigáló felhasználóknak is csináltak egy teljesen felesleges Tab-megállót.

A látó billentyűzetes felhasználók számára elengedhetetlen, hogy mindig lássák a fókuszjelzést, vagyis azt, hogy a billentyűfókusz éppen melyik elemen áll. Ha nem látszik a fókuszjelző, az olyan, mintha az egérrel navigáló felhasználók nem látnák az egérkurzorukat, és vaktában kattintgatnának.

Végül érdemes azt is megfigyelni, hogy a billentyűfókusz mozgatása az oldal vizuális görgetését is eredményezheti, ha a fókuszba került elem korábban nem volt a látóterületen belül.

A látássérült felhasználók billentyűzetes navigációja

Képernyőolvasó programot használó látássérült emberek egy másik fókuszt is mozgatnak a billentyűzetükkel. Ez a képernyőolvasó program fókusza. Néhány esetet (például az élő régiókat) leszámítva a képernyőolvasó program mindig csak azt az elemet olvassa fel, amin a képernyőolvasó fókusza áll. A látássérült felhasználók tehát döntően azért léptetik a képernyőolvasó fókuszt, hogy meghallgassák a fókuszált elemet.

Lényeges, hogy a képernyőolvasó fókuszával a nem interaktív, vagyis a billentyűfókusszal nem elérhető elemekre is rá lehet lépni. Többek között a weboldalon lévő szövegek, címsorok, régiók, listák, táblázatok, képek is fókuszálhatók, meg persze a különböző interaktív elemek (például a linkek, a gombok, vagy az űrlapmezők) is. Képernyőolvasóval a fenti kódrészletben bemutatott telefonszámos bekezdés (<p> jelölőelem) is fókuszálható, anélkül, hogy a tabindex attribútum definiálva lenne hozzá.

A képernyőolvasó fókuszát különböző gyorsbillentyűkkel lehet mozgatni. Ezek a gyorsbillentyűk képernyőolvasónként eltérhetnek, de a legtöbb nagyjából ugyanazt a sémát követi. Például a H billentyű a következő címsorra, a T billentyű a következő táblázatra, az L billentyű a következő listára viszi a képernyőolvasó fókuszát. A képernyőolvasó programok lefoglalhatják azokat a billentyűket is, amelyeket amúgy a böngészőprogram alapból más célra használna. Jellemzően a kurzormozgató billentyűkkel például a képernyőolvasó fókusza mozgatható, és nem az oldal vizuális görgetése valósul meg.

Bizonyos szempontból nézve a képernyőolvasó fókusza sokkal gyorsabban és hatékonyabban mozgatható, mint a billentyűfókusz. Ennek ellenére – ahogy már említettem – sokan mégis azt hiszik, hogy a vak felhasználók is csak a Tab billentyűvel tudnak navigálni. Kezdő akadálymentességi tesztelők is gyakran csak így tesztelnek képernyőolvasóval. Sőt olyannal is találkoztam már, aki egyfajta akadálymentességi mérőszámként használta azt, hogy egy vak felhasználó hány Tab leütéssel tud eljutni az oldal aljára.

Természetesen annak semmi akadálya sincs, hogy egy látássérült képernyőolvasós felhasználó is a Tab billentyűt használja. Ilyenkor egy látó billentyűzetes felhasználóhoz hasonlóan ő is a billentyűfókuszt mozgatja, vagyis rálép a következő interaktív (billentyűzettel fókuszálható) elemre. Ha akadálymentes a weboldal, akkor azonnal hallani fogja a fókuszált elem nevét is.

Amikor egy képernyőolvasós felhasználó a Tab billentyűt használja, akkor a billentyűfókusz és képernyőolvasó fókusz összetalálkozik, azaz szinkronba kerülnek egymással. Ez mindaddig így marad, amíg a felhasználó a Tab billentyűvel navigál. Ha azonban egy olyan gyorsbillentyűt nyom meg, ami csak a képernyőolvasó fókuszát mozgatja el, akkor a két fókusz „útjai” ismét elválhatnak egymástól. A következő videón pont egy ilyen helyzetet mutatok.

A két fókusz kapcsolatának demója

A videón az látszik, hogy a Tab billentyűvel belépek a táblázatba, így a billentyűfókusz és a képernyőolvasó fókusz is a táblázatban található első interaktív elemre, egy linkre kerül. Ezután a képernyőolvasó fókuszával elindulok a táblázat aktuális sorában, és néhány cellát lépkedek. Ezek a cellák csak statikus szövegeket tartalmaznak, azaz billentyűfókusszal nem is navigálhatók. Látható, hogy a billentyűfókusz a linken marad, a képernyőolvasó fókusz pedig a mellette lévő cellákon mozog.

Megjegyezném, hogy a képernyőolvasó program fókusza nem feltétlenül jelenik meg vizuálisan, de ha mégis, akkor képernyőolvasónként eltérhet a megjelenési stílusa. A fenti videó a macOS operációs rendszer VoiceOver képernyőolvasójának működése közben készült, aminél a képernyőolvasó fókusza egy fekete keretként jelenik meg.

Űrlapok tervezésekor, fejlesztésekor különösen fontos, hogy tisztában legyünk a billentyűfókusz és a képernyőolvasó fókusz szinkronizált mozgásával. Az űrlapok kitöltésekor ugyanis megfigyelhető, hogy a látó és a látássérült billentyűzetes felhasználók is a Tab billentyű segítségével szeretnek lépkedni az űrlapmezők és az egyéb űrlapelemek között. Mivel ilyen esetben a képernyőolvasós kurzor is átugorja az űrlapelemek között elhelyezett nem interaktív elemeket (például a kitöltési instrukciókat, hibaüzeneteket, címkéket), ezért az általuk biztosított információk a vak felhasználók számára könnyen kimaradhatnak. Ha a látássérült felhasználók számára is akadálymentes űrlapkitöltést szeretnénk biztosítani, akkor az említett elemeket közvetlenül össze kell kapcsolni az űrlapelemekkel. Ilyen megoldást mutat be például az Akadálymentes súgószöveg űrlapmezőkhöz című cikkem.

Ennél a cikknél a hozzászólási lehetőséget lezártam, így ha kérdése vagy hozzászólása van a cikkel kapcsolatban, keressen meg közvetlenül.