Lisää ‘Siirry pääsisältöön’ -linkki

‘Siirry pääsisältöön’ -linkin lisääminen Webflow’ssa

Jos sivusi ei ala navigaatiopalkilla, voit ohittaa tämän ohjeen.

1. Lisää linkki header-elementin ensimmäiseksi lapsielementiksi

Esimerkki: linkin nimi ‘Siirry pääsisältöön’.

Tämä linkki on se, jota käyttäjä klikkaa siirtyäkseen suoraan pääsisältöön.

2. Anna linkille ID

Esimerkki: skip-link‍

3. Määritä pääsisällölle main landmark -tagi ja ID

Esimerkiksi <main id="main">

Tämä elementti on yleensä seuraava navigaatiopalkin jälkeen, esimerkiksi H1-otsikko.

4. Muotoile linkki Styles-paneelissa

Yleinen käytäntö: linkki piilotetaan normaalitilassa ja näytetään vain, kun se on fokusoitu.

Esimerkki toteutuksesta:

1. Aseta negatiivinen margin-top linkille sen oletustilassa.
2. Valitse Focused-tila ja palauta margin-top takaisin 0:ksi, jotta linkki näkyy, kun käyttäjä painaa Tab-näppäintä.

‍5. Lisää mukautettu koodi

1. Mene: Project Settings > Custom Code > Before Footer
2. Lisää seuraava koodi ja korvaa tarvittaessa:
   • #skip-tp-main → skip-linkin ID
   • #main → pääsisällön elementin ID
3. Julkaise sivusto
   • Varmista, että ‘Siirry pääsisältöön’ -linkki toimii oikein.
   • Kun käyttäjä painaa Tab-näppäintä, fokus jatkuu valitussa pääsisällön elementissä.

Miksi tämä koodi on tarpeellinen?

Ilman tätä koodia “Ohita sisältöön” -linkki toimii pelkkänä ankkurina:

• Kun käyttäjä painaa Tab ja sitten Enter, selain vierittää sivun pääsisältöön.
• Mutta fokus jää linkkiin, eli ruudunlukija ja näppäimistön käyttäjä eivät välttämättä tiedä, että sisältöön on siirrytty.
• Tab-näppäimellä jatkamalla käyttäjä joutuu tabbamaan useita elementtejä läpi, ennen kuin pääsee oikeaan sisältöön.

Koodi ratkaisee tämän siirtämällä fokuksen suoraan pääsisältöön, jolloin navigointi alkaa heti oikeasta kohdasta.