Ugrólink a tartalomra

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 (a <body> elejére)

<a class="skip-link" href="#fo-tartalom">Ugrás a tartalomra</a>
…
<main id="fo-tartalom">
…
</main>

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.

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.