Képernyőolvasó-kompatibilitás billentyűzetvezérlés. Miért?

A weboldalon az egérmutató kis nyíl szokta a linkeket jelölni

2.1 Irányelv: Billentyűzet vezérlés: Minden funkció legyen elérhető a billentyűzetről.
2.1.1 A tartalom összes funkcionalitása működtethető a billentyűzeten keresztül, anélkül, hogy specifikus időzítést igényelne az egyedi billentyűleütésekhez (kivéve, ahol az alapul szolgáló funkció olyan bevitelt igényel, amely a felhasználó mozgásának útvonalától és nem csak a végpontoktól függ). (A szint)

Ezt írja a WCAG 2.0. Egy ideig mi is úgy ellenőriztük e feltétel meglétét, hogy képernyőolvasóval teszteltük a dokumentumot. Már egy ideje rájöttünk, hogy ez nem helyes. Ennél jóval egyszerűbben kell tesztelni. A lényeg, hogy TAB billentyűvel végig kell tudnunk sétálni az oldal összes vezérlőelemén. Hogyha 200 ilyen elem van, akkor mind a 200 vezérlő elemen. A képernyőolvasók ma már jóval intelligensebbek ennél. A JAWS például külön felsorolja a vezérlőelemeket, és lehetőség van csak a vezérlőelemek között böngészni és választani. Akinek viszont nincs képernyőolvasója, de van mozgásszervi problémája, és egér nélkül használná a világhálót, az a TAB és a SHIFT+TAB billentyűket használja.
Nagyon sok esetben találkoztam azzal, hogy egy nem erre való HTML elemet használtak linkként. Ha az alábbi, Javascripttel aktiválható sorral találkozik a böngésző, akkor a felhasználó biztos nem tud TAB-al rámenni:

Katt ide, hogy történjen valami...

A legjobb megoldás ez lenne:

Történjen valami...

Mi történik, ha az alábbi módon oldjuk meg?

Történjen valami...

Ez esetben rá lehet menni TAB-al, de a  képernyőolvasók továbbra sem fogják felismerni, hogy vezérlőelem.

Erre megoldás az WAI-ARIA elem beillesztése

Történjen valami...

Ez utóbbi esetben már billentyűzettel is elérhető, és képernyőolvasóval is. Viszont nem biztos, hogy ENTER  billentyűvel aktiválható, márpedig a WCAG 2.0 szerint ez is szükséges. Ezt a JavaScript “keyDown” eseményével lehet megoldani.

Vajon milyen oka lehet, hogy az erre szolgáló HTML elemet egy bonyolultabb megoldással kiváltsuk? Eddig még nem találtam rá választ. A megoldás egyszerű: Ha linket szeretnénk, helyezzünk el linket.

A cikk megírásában inspirált: Bryan Garaventa: Why keyboard accessibility isn’t the same as screen reader accessibility