Tab-sorrend

Aki billentyűzettel jár be egy oldalt, a Tab billentyűvel lépked az elemek között. A természetes sorrend a HTML forrásának sorrendje, ami általában megegyezik azzal, ahogy az elemek a képernyőn követik egymást. A tabindex attribútumnak nullánál nagyobb értéke ezt felülírja: az ilyen elemek előbb következnek, mint a többi, a fókusz pedig össze-vissza ugrál az oldalon. A WCAG 2.2 2.4.3-as sikerességi feltétele (Focus Order, A szint) azt kéri, hogy a fókusz sorrendje őrizze meg a jelentést és a használhatóságot.

Hogyan mérjük

A riport egy valódi böngészőben betölti az oldalt, és lefuttatja a Lighthouse tabindex auditját (az axe-core szabálya; a riport Lighthouse 13.6 és axe-core 4.14 változattal dolgozik). A szabály minden tabindex attribútummal rendelkező elemet megvizsgál.

• Megfelelő: van tabindex attribútum az oldalon, és mindegyik értéke 0 vagy negatív.
• Hiba: legalább egy elemen a tabindex értéke nullánál nagyobb.
• Nem értékelhető: az oldalon sehol nincs tabindex attribútum, vagyis nincs mit vizsgálni. Ez nem hiba: a természetes sorrend érvényesül.

Figyelmeztető szint nincs; a teszt súlyossága alacsony.

Eltérés a szabványtól: a riport szűkebb, mint a WCAG. A pozitív tabindex az axe-core-ban jó gyakorlati szabály (best practice), nem külön WCAG-hiba, és a mérés csak ezt az egy jelet nézi. Azt nem vizsgálja, hogy a fókusz tényleg a képernyőn látható sorrendben halad-e: a CSS-sel átrendezett (például order vagy abszolút pozícionált) tartalom, vagy a JavaScripttel mozgatott fókusz sorrendje a teszten kívül van. Az MDN is azt írja a tabindex oldalán, hogy a pozitív értékeket kerülni kell, mert az elemek természetes sorrendjét felülírja.

Hogyan javítsd

Töröld a nullánál nagyobb tabindex értékeket (tabindex="1", tabindex="2", …), és rendezd úgy a HTML forrását, hogy az elemek a kívánt sorrendben kövessék egymást. A tabindex két értékének van helye:

• tabindex="0": egy alapból nem fókuszálható elemet (például egy egyedi vezérlőt) beemel a természetes sorrendbe. Lehetőleg inkább eleve fókuszálható elemet használj (<button>, <a href>).
• tabindex="-1": az elem programból (JavaScript focus()) fókuszálható, de a Tab nem lép rá.

HTML

<!-- előtte: a fókusz összevissza ugrál -->
<input tabindex="3" name="vezeteknev">
<input tabindex="1" name="keresztnev">
<input tabindex="2" name="email">

<!-- utána: a forrás sorrendje adja a Tab-sorrendet -->
<input name="keresztnev">
<input name="vezeteknev">
<input name="email">

WordPress

A pozitív tabindex általában a téma sablonjából, egy oldalszerkesztő beállításából vagy egy bővítmény kódjából jön. Keresd meg a forrásban (az oldal forrásában keress rá a tabindex=" szövegre), és ahol a bővítmény vagy a téma írja ki, ott a beállításokban vagy a sablonban töröld, illetve vedd fel a kapcsolatot a bővítmény fejlesztőjével. Gyermektémában módosítsd, hogy a téma frissítése ne írja felül.

Hogyan ellenőrizd

1. Az oldal Konzoljában (F12) listázd a pozitív értékű elemeket:

   Konzol

   [...document.querySelectorAll('[tabindex]')].filter((e) => e.tabIndex > 0)

   Az eredmény legyen üres lista.

2. Egér nélkül, csak a Tab billentyűvel járd végig az oldalt: a fókusznak a képernyőn felülről lefelé, balról jobbra kell haladnia.

3. A riportban futtasd újra a mérést.