WCAG 2.0: Jól látható fókusz

A fókusz kiemelése a honlapomon

Minden nap kapom az értesítéseket a világ minden tájáról az akadálymentességgel kapcsolatosan. Azt tapasztaltam, hogy a Twitteren vannak a legjobb megosztások. Ma kaptam a világtörténelem legegyszerűbb és legrövidebb akadálymentesítési tanácsát. Belefért a Twitter 143 karakterébe:

Használd ezt az elképesztően egyszerű trükköt, hogy billentyűzetről használható legyen a honlapod:
Töröld ezt:
:focus {outline: none}

Mit is jelent ez? A honlapok alapban olyanok, hogy a TAB billentyűvel végig lehet menni a honlap elemein. A böngészők az éppen fókuszban lévő elemet pedig általában jól látható kerettel kiemelik. A webdesignerek ezt élből nem szeretik, és beteszik a fenti sort a honlap CSS fájljába, amely a megjelenésért felelős.

Amikor kitöröljük ezt a sort, a fókuszban lévő honlap-elem ismét látható lesz, Így a gyengénlátók is képesek követni, hogy a weblap melyik részén vannak. Nem árt tudniuk, melyik oldal jelenne meg, ha éppen egy entert nyomnának.

Én mint látó ember is szeretem a fókusz kiemelését, mert ritkán használom az egeret. Amikor lehet, billentyűzetről végzek el mindent.

Egy másik példa: az amerikai WebAim honlapja így mutatja a fókuszban lévő elemet:
Fókuszban lévő elemet mintha sárga kiemelővel jelezték volna.