Tutorial
Kako izraditi skip poveznicu
Ukratko
Skip poveznica prva je fokusabilna poveznica na stranici i pokazuje, preko sidra, na id glavnog sadržaja. Ne skrivaj je s display:none (to je čini nefokusabilnom); pomakni je izvan vidokruga i prikaži pri :focus. Odredište treba id i tabindex="-1" da fokus stvarno stigne ondje.
Ukratko po koracima
Skip poveznica ide prva
Neka prvi element u <body> bude poveznica s href="#main-content".
Označi odredište
Daj <main> elementu id="main-content" i tabindex="-1".
Prikaži pri fokusu
Sakrij poveznicu vizualno (ne s display:none) i prikaži je pri :focus.
Testiraj
Učitaj stranicu, pritisni Tab jednom: skip poveznica mora se pojaviti i raditi.
Svaka stranica ponavlja iste blokove prije pravog sadržaja: logotip, glavnu navigaciju, često pretragu. Korisnici tipkovnice i čitača zaslona morali bi kroz sve to proći tipkom Tab na svakoj podstranici. Skip poveznica preskače te blokove jednim pritiskom: to je najjednostavniji način da se ispuni 2.4.1 (Zaobilaženje blokova).
Problem
<body>
<!-- Kein Skip-Link: Tastaturnutzer muessen sich durch die ganze
Navigation tabben, auf jeder Seite neu -->
<header>
<nav><!-- 30 Menuepunkte --></nav>
</header>
<main>
<!-- Inhalt -->
</main>
</body>
/* Oder: ein Skip-Link, der per display:none unfokussierbar ist */
.skip-link { display: none; }Dvije varijante ne uspijevaju: nikakva skip poveznica, ili skip poveznica s display:none. display:none uklanja element iz redoslijeda tabulacije, pa nikad ne može dobiti fokus i beskorisna je.
Rješenje
Poveznica je prvi fokusabilni element u body-ju i pokazuje na id glavnog sadržaja. Vidljiva postaje tek pri fokusu.
<body>
<a class="skip-link" href="#main-content">Zum Inhalt springen</a>
<header>
<nav><!-- 30 Menuepunkte --></nav>
</header>
<!-- tabindex="-1" macht das Ziel per Skript/Anker fokussierbar,
ohne es in die Tab-Reihenfolge aufzunehmen -->
<main id="main-content" tabindex="-1">
<!-- Inhalt -->
</main>
</body>/* Sichtbar erst bei Fokus: aus dem Blickfeld geschoben,
aber im DOM und in der Tab-Reihenfolge (nicht display:none!) */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
padding: 0.75rem 1rem;
background: #1d4ed8;
color: #ffffff;
}
.skip-link:focus {
left: 0.5rem;
top: 0.5rem;
z-index: 1000;
}Detalji koji se često previde
- Ne koristi samo left: -9999px ako poveznica mora podržavati RTL jezike: ondje radije clip-path ili sr-only tehniku. Za LTR je prikazana varijanta robusna.
- Skip poveznica mora imati stvaran kontrast kad je vidljiva (1.4.3): bijeli tekst na plavoj to ispunjava.
- Jedna skip poveznica na glavni sadržaj ispunjava 2.4.1. Na vrlo složenim stranicama možeš ponuditi i više (npr. "Skok na pretragu").
Testiranje
- Ponovno učitaj stranicu i pritisni Tab točno jednom.
- Skip poveznica mora se pojaviti (ne ostati skrivena).
- Pritisni Enter: fokus mora skočiti u glavni sadržaj, ne samo skrol.
Povezani WCAG kriteriji
Česta pitanja
- Zašto ne jednostavno display:none za skip poveznicu?
- display:none i visibility:hidden uklanjaju element iz redoslijeda tabulacije. Poveznica tada nikad ne može dobiti fokus i neučinkovita je. Koristi tehniku vizualnog skrivanja koja element ostavlja u DOM-u i fokusabilnim.
- Treba li odredište stvarno tabindex="-1"?
- Da, u praksi treba. Bez tabindexa neki preglednici pomaknu samo skrol, ne i fokus tipkovnice. tabindex="-1" čini odredište fokusabilnim preko skripte/sidra bez dodavanja u uobičajeni redoslijed tabulacije.
- Kamo skip poveznica treba skočiti?
- Na početak glavnog sadržaja, obično <main> element s id-om poput main-content. Time se preskaču zaglavlje i navigacija.
Zatražite besplatno skeniranje
Recite nam svoju domenu — provodimo besplatno početno skeniranje i pokazujemo najvažnije prepreke.