Ohituslinkki

Ohituslinkki on näppäimistöpikakuvake sivun alussa, jonka avulla käyttäjä voi hypätä toistuvan navigoinnin ohi suoraan pääsisältöön. Se täyttää WCAG 2.4.1 Bypass Blocks -kriteerin (taso A) ja on yksi edullisimmista saavutettavuusparannuksista.

Miksi se on olemassa

Tyypillisellä sisältösivustolla ylätunnisteessa on kuusi päänavigointilinkkiä, kielivalitsin ja teeman vaihtokytkimet. Alatunnisteessa on vielä kaksitoista lisää. Jokainen sivu toistaa nämä rakenteet. Näppäimistöllä tai ruudunlukuohjelmalla sivulle saapuva käyttäjä joutuu painamaan Tab-näppäintä noin kolmekymmentä kertaa ennen kuin pääsee artikkelin sisältöön. Tämä on uuvuttavaa jokaisella sivunavigaatiolla.

Ohituslinkki on yksittäinen <a href="#main-content">Siirry sisältöön</a>, joka sijoitetaan dokumentin ensimmäiseksi kohdistettavissa olevaksi elementiksi. Käyttäjä painaa Tab-näppäintä kerran sivun latautumisen jälkeen, näkee “Siirry sisältöön”, painaa Enter ja kohdistus siirtyy artikkelin runkoon.

Toteutus

Kaava on yksinkertainen, mutta siinä on muutamia tunnettuja sudenkuoppia:

<a class="skip-link" href="#main-content">Siirry sisältöön</a>
...
<main id="main-content" tabindex="-1">
  ...
</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

Kolme tärkeää yksityiskohtaa:

1. Linkin on oltava näkyvissä kohdistuksen saadessaan. Pysyvästi display: none -tilassa oleva ohituslinkki on näkymätön näkevälle näppäimistökäyttäjälle. Piilota se ruudun ulkopuolelle sijoittelulla, ei display: none- tai visibility: hidden -tyylillä.

2. Kohteen on vastaanotettava kohdistus. Pelkkä <main> ei oletusarvoisesti saa näppäimistökohdistusta. Lisäämällä tabindex="-1" se on ohjelmallisesti kohdistettavissa, joten selain siirtää kohdistuksen linkkiä seurattaessa. Ilman tätä URL-ankkuri muuttuu mutta kohdistus ei siirry, ja seuraava Tab aloittaa sivun alusta — mikä kumoaa ohituslinkin tarkoituksen.

3. Sen on oltava ensimmäinen kohdistettavissa oleva elementti. Ei “ensimmäisen sadan elementin joukossa” — ensimmäinen. Jos sitä edeltää jokin muu elementti (logolinkki, hakukuvake), käyttäjän on tabuloitava niiden ohi ennen ohituslinkkiä.

Useita ohituslinkkejä

Pitkät sivut, joissa on useita toistuvia alueita, hyötyvät joskus pienestä “ohitus”-valikosta yhden linkin sijaan:

• Siirry pääsisältöön
• Siirry navigointiin
• Siirry alatunnisteeseen

Lyhyt kohdistuksen saadessaan näkyvä kolmen tai neljän kohteen lista on hyvä. Pitkä automaattisesti luotu sisällysluettelo jokaisen sivun alussa ei ole.

Mitä se ei korvaa

Ohituslinkki on bypass-blocks-turvaverkko. Se ei korvaa asianmukaisia kiintopisteitä (<nav>, <main>, <aside>, <footer>), asianmukaista otsikkorakennetta (yksi <h1> per sivu, hierarkkiset <h2>-elementit) eikä ARIA aria-label -attribuuttia toistavissa kiintopisteissä. Ruudunlukuohjelman käyttäjät siirtyvät alueiden ja otsikoiden välillä näppäinoikoteillä, jotka riippuvat näistä rakenteista; ohituslinkki on tarkoitettu pelkästään näppäimistöä käyttäville näkeville käyttäjille.