Miért helytelen egyszerűen lenullázni a CSS outline tulajdonságot?

Webfejlesztők gyakran felteszik azt a kérdést, hogy miképpen lehet annak az idegesítő pöttyözött körvonalnak a megjelenését kikapcsolni, amikor rákattintunk egy linkre. Erre rengeteg webes forrás egyszerűen a következő CSS „trükköt” javasolja:

a {
   outline: none;
}

Esetleg ezt:

a {
   outline: 0;
}

És láss csodát, a pöttyözött körvonal tényleg eltűnik. A fejlesztő örül, és innentől kezdve biztos ami biztos, minden új weboldalnál beírja ezt a CSS szabályt. Ezzel azonban egy komoly akadálymentességi hibát követ el, hiszen a körvonal nem véletlenül volt ott.

Mi az a fókusz?

A weboldalakon (és általában a grafikus felhasználói felületeken) az elemek körül megjelenő körvonal azt jelzi a felhasználónak, hogy adott pillanatban melyik elemen van a fókusz. Jellemzően a fókuszban lévő elem lesz a tárgya a következő billentyűzettel végrehajtott felhasználói interakciónak. Például a fókuszban lévő űrlapmezőbe lehet majd írni, vagy a fókuszban lévő link aktiválódik majd az Enter gomb lenyomására.

Ha a közvetlen JavaScript manipulációt nem számítjuk, akkor a weboldalon lévő fókusz (és vele együtt a fókuszjelző) egérkattintással vagy valamelyik dedikált billentyű (jellemzően a Tab) megnyomásával vándorolhat az elemek között.

A fókuszjelző megjelenésének alapértelmezett stílusa böngészőprogramonként eltér. Van, amelyiknél pöttyös és van, amelyiknél neonvilágításhoz hasonlító folytonos körvonal. A CSS outline tulajdonság segítségével a fókuszjelző körvonalának színe, vastagsága, stílusa tetszés szerint átállítható. Ahogy láttuk, akár le is nullázható, ami a fókuszjelző eltüntetését jelenti.

Kiknek fontos a fókuszjelző?

A fókuszjelző egyfajta kurzor azoknak a felhasználóknak, akik egyáltalán nem használnak egeret. Jellemzően azért, mert fizikailag képtelenek rá. Például olyan mozgássérült személyek, akik valamilyen ideg- vagy izomrendszeri betegség miatt a karjukat, illetve a kezüket csak nehezen vagy egyáltalán nem képesek használni. Másoknak születési rendellenesség, baleset vagy amputáció miatt egyszerűen nincs karjuk. De ide tartozhatnak azok az amúgy ép felhasználók is, akik például átmenetileg egy begipszelt kar vagy egy ínhüvelygyulladás miatt nem tudják az egeret használni. (A teljesség igénye miatt megemlítem, hogy nem használnak egeret a vak felhasználók sem, bár esetükben a vizuális fókuszjelzőnek értelemszerűen nincs szerepe.)

Próbálja meg egér nélkül!

Gyakran javaslom a weboldal tulajdonosoknak és a fejlesztőknek is, hogy tapasztalják meg ezt az akadályoztatottságot. Most ezt javaslom Önnek is. Tegye félre az egeret, és próbálja meg a weboldalát kizárólag billentyűzet segítségével használni.

A böngészőprogramok többségében a fókuszjelzőt jellemzően a tabulátor gomb lenyomásával tudja áthelyezni a következő fókuszálható elemre, így például a következő linkre. Sajnos nem mindegyik böngészőprogram viselkedik így. Van, amelyiknél külön be kell kapcsolni ezt a lehetőséget (Safari), és van olyan is, ahol a linkek közötti fókuszváltás csak más billentyűkombinációval lehetséges (Opera). Ha már rajta áll egy linken, akkor az Enter gomb megnyomásával tudja aktiválni azt.

Az egyik legfontosabb kérdés, hogy látja-e a fókuszjelzőt, amikor áthelyezi? Vajon a weboldal összes menüpontjára, linkjére rá tudja-e vinni? Minden pillanatban biztos-e abban, hogy ha megnyomná az Enter gombot, akkor az Ön által kiválasztott link, illetve menüpont aktiválódna?

A fókuszjelzőre mindenképpen szükség van

Akár látta a fókuszjelzőt, akár nem, Ön is levonhatja azt a következtetést, hogy a fókuszjelzőnek döntő szerepe van a billentyűzetes navigációban. Nélküle képtelenség akadálymentesen navigálni.

Aki tehát a cikk elején említett CSS outline lenullázási „trükköt” alkalmazza, az biztosan kizárja weboldalának használatából a billentyűzetet alkalmazó felhasználókat.

Nem véletlen, hogy a fókuszjelző megjelenése a WCAG 2.0 akadálymentesítési szabvány egyik követelménye.

De a körvonal felvillanása akkor is zavaró!

A webfejlesztők valószínűsíthetően nem a fókuszjelző iméntiekben leírt működését tartják zavarónak. Inkább azzal lehet a gondjuk, hogy a linkre történő kattintáskor (vagyis a link aktiválásakor) a linkhez kerül a fókusz. Ha pedig a linkhez kerül a fókusz, akkor a fókuszjelző is megjelenik. Akár egy rövid felvillanásra is. Ez utóbbi hathat zavaróan.

Megjegyzem, ebben a viselkedésben sem egységesek a böngészőprogramok. Például a Chrome és a Safari a linkre történő kattintáskor nem adja oda a linknek a fókuszt. Így ezeknél nincs is fókuszjelző villanás. Az már egy külön kérdés, hogy ez a viselkedés logikus-e vagy sem.

Kompromisszumos megoldás

Létezik egy olyan kompromisszumos megoldás, amely lehetővé teszi, hogy az egérrel navigáló felhasználókat ne idegesítse a linknél felvillanó fókuszjelző, ugyanakkor a billentyűzetet használók számára mindig látható maradjon.

Ezt úgy tudjuk elérni, hogy a körvonalat nem általánosan, hanem csak és kizárólag a link aktiválásakor kapcsoljuk le. Ehhez felhasználjuk a CSS :active pszeudoosztályát, ami a link aktivált állapotát tükrözi:

a:active {
   outline: none;
}

Ez a megoldás nem mindig tökéletes, ugyanis az egérkattintás után, de a link által hivatkozott oldal letöltése előtt a fókuszjelző még mindig felvillanhat. Ha azt feltételezzük, hogy az egérkattintás alatt és után az egérkurzor nem mozdul el a linkről, akkor a körvonalat a link :hover állapotában is kikapcsolhatjuk:

a:hover, a:active {
   outline: none;
}

Ennek a megoldásnak már csak egy szépséghibája marad. Amikor a felhasználó a böngészőprogram visszalépő gombjával visszalép az előző oldalra, akkor a fókuszjelző látszódni fog az általa kattintott linken. De talán ez már nem annyira zavaró.

Frissítés (2020. március): A készülő CSS Selector Level 4 specifikációba bekerült a :focus-visible nevű pszeudoosztály is, ami szintén megoldást kínálhat a problémára.

Végső gondolat

Logikusan merülhet fel Önben is az a következtetés, hogy ha egy felhasználó a korábban felsorolt okok miatt nem tudja használni az egeret, akkor nem tudja használni a billentyűzetet sem. Ez azonban nem feltétlenül igaz. Például a billentyűk megnyomásához elég lehet egyetlen ujj használata is. De léteznek olyan speciális kisegítő eszközök is, amelyek a felhasználói interakciót végső soron billentyűlenyomásra „fordítják” le. A billentyűzetes felhasználást ezért sem szabad figyelmen kívül hagyni.