# Ugrólink a tartalomra

> A teszt azt nézi, hogy a lap elején van-e ugrólink a fő tartalomra. Tegyél a body elejére egy linket, ami fókuszkor megjelenik és a main elemre mutat.

Aki billentyűzettel (a Tab billentyűvel) járja be az oldalt, annak minden oldalbetöltés után végig kell lépkednie a fejléc logóján és a teljes menün, mielőtt a tartalomhoz ér. Az ugrólink az oldal első fókuszálható eleme, és Entert nyomva egyből a fő tartalomra visz. A WCAG 2.2 2.4.1-es sikerességi feltétele (Bypass Blocks, A szint) azt kéri, hogy legyen mód az ismétlődő tartalomblokkok átugrására.

## Hogyan mérjük

A riport egy valódi böngészőben betölti az oldalt, és a betöltött DOM-ban végigmegy a fókuszálható elemeken (`a[href]`, `button`, `input`, `select`, `textarea` és a `tabindex` attribútummal rendelkezők, a letiltottak és a `type="hidden"` mezők nélkül), a dokumentum sorrendjében. Az első hármat vizsgálja.

- **Megfelelő:** az első három fókuszálható elem között van olyan `<a>`, amelynek `href` értéke `#`-tel kezdődik (és hosszabb, mint a puszta `#`), és az oldalon létezik az `id`-jű elem, amire mutat.
- **Hiba:** ilyen link nincs az első három fókuszálható elem között.

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

A mérés nem vizsgálja, hogy a link fókuszkor látható-e, és azt sem, hogy valóban a fő tartalomra mutat-e. Nem veszi figyelembe a CSS-t: az elrejtett (például `display: none` stílusú) link is számolódik a három elem között.

**Eltérés a szabványtól:** a riport szigorúbb, mint a WCAG. A 2.4.1 sikerességi feltételt a W3C szerint többféle módszerrel is lehet teljesíteni, az ugrólinken (G1 technika) kívül például ARIA-tájékozódási pontokkal (ARIA11) vagy címsorokkal (H69). Egy jól strukturált oldal tehát ugrólink nélkül is megfelelhet a WCAG-nak, a riport mégis hibát jelez. A hosszabb menüjű oldalaknál az ugrólink gyakorlati haszna így is nagy; a W3C is úgy fogalmaz, hogy a mindig látható linkek a legjobbak, de a fókuszkor megjelenő is elfogadott.

## Hogyan javítsd

Három lépés: a `<main>` elemnek legyen `id`-ja, a `<body>` első fókuszálható eleme legyen a link, és a link csak vizuálisan legyen rejtett, billentyűs fókuszra jelenjen meg. A `display: none` nem jó, mert a billentyűzet sem éri el az így elrejtett linket.

### HTML

```html title="HTML (a <body> elejére)"
<a class="skip-link" href="#fo-tartalom">Ugrás a tartalomra</a>
…
<main id="fo-tartalom">
…
</main>
```

```css title="CSS"
.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100000; padding: 8px 16px; background: #fff; color: #000; }
```

Ha már van `<main>` elemed, csak az `id`-t tedd rá.

### WordPress

Klasszikus témában a `header.php`-be, a `wp_body_open()` hívás után tedd be a linket. A téma `screen-reader-text` osztálya rejti el és mutatja meg fókuszkor; a `href` a téma fő tartalom-elemének `id`-jére mutasson.

```php title="header.php"
<a class="skip-link screen-reader-text" href="#fo-tartalom">Ugrás a tartalomra</a>
```

Ha a témád nem ismeri a `screen-reader-text` osztályt, tedd be a fenti CSS-sorokat is (a link ezen az osztályon kívül a `skip-link` osztályt is viseli). Gyermektémában módosítsd, hogy a téma frissítése ne írja felül.

## Hogyan ellenőrizd

1. Töltsd újra az oldalt, és nyomd meg egyszer a Tab billentyűt egérhasználat nélkül. A linknek meg kell jelennie. Enterrel a fókusznak a fő tartalomra kell ugrania.
2. A riportban futtasd újra a mérést; a teszt ilyenkor megfelelő lesz.