Ohitettavat lohkot

Mitä vaaditaan

Jos sama sisältölohko esiintyy useilla sivuilla — sivuston ylätunniste, päänavigaatio, megavalikko, leivänmurupalkki, apulinkit — hiirellä navigoivat käyttäjät ohittavat sen välittömästi. Näppäimistökäyttäjien on tabuloitava se läpi joka kerta. Ruudunlukijakäyttäjien on kuunneltava se. Onnistumiskriteeri edellyttää vähintään yhtä mekanismia, jonka avulla voidaan siirtyä suoraan pääsisältöön.

WCAG hyväksyy useita mekanismeja: „Siirry pääsisältöön“ -linkki, asianmukaiset maamerkkialueet (<header>, <nav>, <main>, <footer>) tai todellinen otsikkohierarkia, jossa ruudunlukijakäyttäjät voivat navigoida H-näppäimellä. Käytännössä ohituslinkki yhdistettynä maamerkkeihin on turvallinen perustaso.

Kuinka vaatimus täytetään

• Lisää „Siirry pääsisältöön“ -linkki sivun ensimmäiseksi kohdistuselementiksi. Tee siitä näkyvä kohdistuksen yhteydessä, älä pysyvästi piilotettu.
• Osoita ohituslinkin href <main>-elementin id-arvoon ja lisää tabindex="-1" <main>-elementtiin, jotta kohdistuskehys siirtyy oikein Safarissa.
• Käytä todellisia maamerkkielementtejä: yksi <header>, yksi <nav> (tai useita aria-label-attribuutilla), yksi <main>, yksi <footer> per sivu.
• Käytä selkeää otsikkorakennetta, jotta JAWS- ja NVDA-käyttäjät voivat hypätä painamalla H, 1, 2 tai 3.
• Jos sivulla on useita toistuvia lohkoja (apunavigaatio + päänavigaatio + leivänmurut), harkitse toista ohituslinkkiä hankalimmalle kohdalle.

Yleisiä virheitä

• Ohituslinkki piilotettu display: none -määrittelyllä sen sijaan, että se siirrettäisiin näytön ulkopuolelle ja paljastettaisiin kohdistuksen yhteydessä — avustava teknologia ei löydä sitä.
• Ohituslinkin kohteella puuttuu tabindex="-1", joten Safari/WebKit sivuuttaa hypyn ja pitää kohdistuksen ohituslinkissä.
• <main> on sijoitettu <nav>-elementin sisään tai se esiintyy sivulla useita kertoja.
• Otsikkohierarkia hyppää tasojen yli (h1 → h4) tai käyttää otsikoita pelkästään visuaaliseen kokoon sovittamiseen, mikä rikkoo H-näppäinnavigoinnin.
• Kiinteät ylätunnisteet, jotka peittävät kohdistuneen elementin ohituslinkin aktivoinnin jälkeen — katso 2.4.11.

Miksi tämä on tärkeää

Ohitettavat lohkot on luettelon edullisin saavutettavuusparannnus — ohituslinkki vaatii noin 10 riviä HTML:ää ja CSS:ää — mutta virheiden esiintymisaste tuotantoympäristön sivustoilla on silti noin 60 % WebAIM:n vuosittaisen miljoonan sivuston skannauksessa. Näppäimistöllä navigoivalle käyttäjälle, joka selaa sivustoa, jossa on 40 kohdan megavalikko, sen läpikäyminen jokaisella sivulatauksella on uuvuttavaa ja pitkissä selausistunnoissa kuormittavaa.