# Tab-sorrend

> A teszt azt nézi, hogy van-e nullánál nagyobb tabindex az oldalon, ami felülírja a természetes Tab-sorrendet. Töröld ezeket az értékeket.

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 title="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:

   ```js title="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.