Hyppylinkki - Loikkaus kohti saavutettavuutta

Siirry pääsisältöön, Hyppää sisältöön, Siirry sisältöön…

Hyppylinkillä on monta nimeä, mutta sen käyttötarkoitus on lähtökohtaisesti aina sama. Linkki auttaa näppäinkäyttäjää ohittamaan toistuvan sisällön sivun alussa ja siirtymään suoraan pääsisältöalueelle. Vaikka näppäinkäytöstä voi ensimmäisenä tulla mieleen ruudunlukijakäyttö, ei myöskään näkeviä näppäinkäyttäjiä tule unohtaa. Hyppylinkin tulisi siis olla tarjolla niin ohjelmallisesti kuin myös visuaalisestikin. Näppäinkäyttöä kannattaa kokeilla itsekin navigoimalla sarkainpainikkeella (tab) selaimen osoiteriviltä johonkin pääsisältöalueen linkkiin lainkaan hiireen koskematta. Montako painallusta tarvitsit?

Yksinkertaisuus on valttia

Saavutettavuusvaatimusten näkökulmasta hyväksyttäviä hyppylinkkitoteutuksia on monia, mutta usein yksinkertaisimmat ratkaisut osoittautuvat myös parhaiten toimiviksi. Hyppylinkkeihin liittyy kolme olennaista ominaisuutta, jotka kannattaa painaa mieleen. Huomaa, että vaikka alla kuvatut perusperiaatteet pätevätkin yleisesti hyppylinkkeihin, ei toiminnallisuutta ole pakko toteuttaa tässä kuvatulla tavalla, vaan myös muut testatut ja apuvälineiden kanssa toimiviksi todetut ratkaisut ovat täysin hyväksyttäviä.

1. Sijoita hyppylinkki aivan sivun alkuun

Hyppylinkin tulee sijaita ohjelmallisesti aivan sivun alussa, siis ennen logolinkkejä, hakutoimintoja tai mitään muuta sisältöä. Ainoa poikkeus tähän on mahdollinen ilmoitus sivuston käyttämistä evästeistä (cookies), mutta tapauksesta riippuen, sekin voidaan toisinaan esittää vasta hyppylinkin jälkeen. Väärin sijoitettu hyppylinkki ei täytä tarkoitustaan ja voi pahimmillaan jopa hämmentää käyttäjiä.

2. Varmista oikea kohde

Pohjimmiltaan hyppylinkki on tavallinen linkki, joka vie käyttäjän pääsisältöalueelle. Vaihtoehtoisia kohteita on käytännössä kolme: pääsisältöalueen merkkaava <main>-elementti, erillinen <span>-elementti pääsisältöalueen alussa tai pääsisältöalueen <h1>-pääotsikko. Nykyisin ei tarvita erillisiä nimettyjä ankkureita, vaan viittaus elementin id-tunnukseen riittää. Huomaa, että viittaus tulee tehdä yhteen mahdollisista vaihtoehdoista, ei kaikkiin kolmeen.

Kuvateksti: Esimerkit mahdollisista hyppylinkin kohteista. Valitulle vaihtoehdolle tulisi asettaa id-arvo “maincontent”.

Näppäinkäyttäjille kaikki yllä kuvatut vaihtoehdot käyttäytyvät samoin, mutta toteutuksissa on pieniä eroja eri ruudunlukijoiden välillä. Eniten päänvaivaa aiheuttaa VoiceOver-ruudunlukija, jolla on historiallisesti ongelmia siirtyä hyppylinkkien kohteisiin, ellei niille ole erikseen määritetty tabindex=”-1”-attribuuttia. Koska kyseinen attribuutti taas voi aiheuttaa ongelmia etenkin lomakekenttiä sisältävän pääsisältöalueen kanssa, rajautuvat parhaat vaihtoehdot joko erilliseen <span>-elementtiin tai pääotsikkoon. Erillinen elementti toimii muuten hyvin, mutta Talkback- ja Narrator-ruudunlukijat pysyvät hiljaa tällaiseen tyhjään elementtiin kohdistettaessa. Näin ollen toistaiseksi parhaaksi ratkaisuksi jää käyttää kohteena pääotsikkoa, jolle on annettu tabindex=”-1”-attribuutti.

Kuvateksti: Esimerkkitoteutus, jossa hyppylinkki vie pääsisältöalueen pääotsikkoon. Tabindex-attribuuttia käytetään parantamaan VoiceOver-tukea.

Saavutettavuusvaatimusten näkökulmasta toteutus, jossa linkki viittaa <span>- tai <main>-elementtiin on kuitenkin myös yhtälailla hyväksyttävä. VoiceOverin puutteita paikkaava tabindex-attribuuttikaan ei tässä yhteydessä ole vaadittava, joskin sitä kannattaa käyttää ainakin vielä toistaiseksi.

Kaikkein tärkeintä on kuitenkin se, että hyppylinkin kohde löytyy kaikilta sivuilta, joilta myös hyppylinkki löytyy. Yksi harmillisen yleinen saavutettavuusongelma on se, että hyppylinkki viittaa id-tunnukseen, jollaista vastaavaa kohdetta ei löydykään koko sivulta. Näin käy helposti esim. SPA-toteutuksissa (Single-page application), joissa pääsisältö vaihtuu dynaamisesti, jolloin hyppylinkin kohde saatetaan poistaa tai piilottaa sisällönmuutosten myötä.

3. Piilota linkki CSS:llä

Vaikka hyppylinkin tulisi olla saatavilla myös visuaalisesti, voi aivan sivun alkuun pakotettu linkki olla monen mielestä sopimaton sivuston ulkoasuun. Onneksi linkki voidaan suhteellisen helposti piilottaa siten, että se tulee visuaalisesti esille ainoastaan siihen näppäimistöllä kohdistettaessa. Toiminnallisuus voi vaikuttaa aluksi työläältä, mutta sen toteuttamiseen riittävät perustaidot CSS:stä. Itse asiassa mukaan ei kannata edes tuoda JavaScriptiä tai mitään monimutkaisempaa tekniikkaa, sillä ne saattavat haitata linkin toimintaa etenkin ruudunlukijakäytössä.

WebAIM on julkaissut hyvät ohjeet hyppylinkin piilottamiseen ja esittämiseen muutamalla rivillä CSS-koodia. Vastaava toiminnallisuus voidaan saavuttaa myös muilla tekniikoilla, mutta linkin toimivuus on tällöin tärkeää testata niin mobiili- kuin desktop-puolellakin.

Määrä ei korvaa laatua

Periaatteessa hyppylinkkien määrää ei ole rajattu. Sivun alussa voi esimerkiksi olla useita eri hyppylinkkejä sivun eri osioihin tai hyppylinkki voi auttaa käyttäjää ohittamaan sisällön keskelle sijoitetun sosiaalisen median upotuksen. Sopivia hyppylinkkiratkaisuja pohtiessa kannattaa kuitenkin muistaa, että liiallinen hyppylinkkien määrä voi kostautua. Jos käyttäjä joutuu navigoimaan sivun alusta kolmen erilaisen hyppylinkin läpi päästäkseen käsiksi päävalikkoon, muuttuu sivuston sivujen selaaminen näppäimistöllä pian rasittavaksi tehtäväksi. Kannattaa siis varmistaa, että jokainen ylimääräinen hyppylinkki on tarpeellinen mukavan käyttökokemuksen kannalta.

Saavutettavuus ei ole kiinni pakollisuudesta

Lopuksi on hyvä huomioida, että lain vaatima WCAG-kriteeristön AA-taso ei sinänsä vaadi hyppylinkkitoteutusta, vaan sille tarjotaan myös korvaavia tekniikoita. Myöskään automaattiset tarkastimet eivät täten yleensä varoita hyppylinkin puuttumisesta. Tämä ei kuitenkaan tarkoita, etteikö hyppylinkkiä olisi syytä käyttää. Vaihtoehtoiset ratkaisut kun sopivat toistaiseksi usein ainoastaan ruudunlukijakäyttäjille ja jättävät näin näkevät näppäinkäyttäjät oman onnensa nojaan. Kuten yleensäkin saavutettavuudessa, on tässäkin yhteydessä siis syytä pohtia, haluaako tehdä sivustostaan ainoastaan lakia noudattavan vai oikeasti saavutettavan kokemuksen kaikille käyttäjäryhmille.