Linkki on usein verkkosivuilla hyvin huomaamaton ja vaatimaton elementti. Harva miettii linkin kohdalla sen merkitystä verkkosivuilla tai yleensä verkossa. Linkki on kuitenkin koko netin perusta – ilman linkkejä ei olisi verkkoa. Linkki on se, joka kytkee sisällöt toisiinsa ja mahdollistaa liikkumisen sisältöjen välillä. Linkki on se, joka kertoo käyttäjälle mitä linkin ”toisesta päästä löytyy” ja mihin siirrytään. Siksi linkin on oltava selkeä.
Muistutettakoon jo heti tässä alkuun, että HTML-kielessä jokaisella elementillä on tarkoituksensa, jossa sitä tulisi käyttää. Linkki-elementin tehtävä on siirtää käyttäjä toiseen sisältöön tai sijaintiin. Vertailuksi mainittakoon painike <button>, jonka tehtävä on suorittaa jokin tehtävä. Saavutettavuustestauksissa lähes poikkeuksetta törmään tilainteisiin, joissa näitä elementtejä on käytetty väärin. Painikkeet siirtävät toiseen sijaintiin tai linkki suorittaa tehtävän. Niin ei pidä tehdä!
Linkin koodi
Linkin koodi on hyvin yksinkertainen HTML:n <a>-elementti. Minimissään elementti tarvitsee tiedon kohteesta, johon linkki johtaa ja tietenkin linkkinä näytettävän sisällön.
<strong><a href="linkin-kohde"></strong>Linkkinä näytettävä sisältö<strong></a></strong>Linkin näytettävä sisältö on tärkeä saavutettavuden kannalta kaikille käyttäjille. Se on se minkä avustavat tekniikat tunnistavat ja ilmoittavat käyttäjälle. Se on myös se, jonka näkevä ”peruskäyttäjä” näkee/lukee. Siksi sen tulisi selkeästi ilmaita mihin linkki johtaa. Linkki-elementin pakollinen attribuutti on href, joka määrittää linkin kohteen. href-attribuutille voidaan antaa esimerkiksi seuraavanlaisia arvoja:
<a href="https://example.com">Ulkoinen sivu</a>
<a href="/about">Sisäinen sivu</a>
<a href="#section1">Sivun sisäinen linkki</a>
<a href="mailto:info@example.com">Lähetä sähköposti</a>
<a href="tel:+358401234567">Soita</a>
Yleisiä attribuutteja ovat myös target ja rel, joilla ilmaistaan missä linkki avataan ja mikä on linkin kohteen suhde linkkiin. Yleisimmin sisällöntuottajien käytettävissä on target-attribuutti. target-attribuutin oletus on "_self", joka ilmaisee, että linkki avataan samaan välilehteen. Attribuutti target="_blank" tarkoittaa, että linkki avataa uuteen välilehteen. Esimerkiksi:
<a href="https://seloit.fi" target="_blank">Verkkosivujen ylläpitoa</a>En tässä artikkelissa yritäkään käydä läpi kaikkia attribuutteja ja niiden käyttötilanteita mutta voin tarvittaessa palata aiheeseen.
Hyvän linkin ominaisuuksia
Hyvän linkin on kuvattava linkin kohde ja toiminta selkeästi käyttäjälle siitä riippumatta näkeekö käyttäjä linkin näytettävän sisällön vai ilmoittaako sen vaikkapa ruudunlukuohjelma. Käyttäjää on aina varoitettava linkin avautumisesta
Käyttäjän varoittaminen
Käyttäjää on varoitettava aina linkin avautumisesta uuteen välilehteen tai jos linkin kohde on jokin ulkoinen sivusto (linkin kohde ei ole samalla sivustolla). Varoittaminen on tärkeää kolmesta syystä.
- Siirryttäessä uudelle välilehdelle ei käyttäjä voi enää palata takaisin selaushistoriassa, mikä voi vaikeuttaa käyttäjän toimintaa. Erityisesti ilman näköhavaintoa ruudunlukuohjelmalla.
- Siirryttäessä uudelle, vieraalle sivustolle vaihtuu sivun rakenne ja käyttölogiikka. Käyttäjän on jälleen opittava missä on ja miten sivulla liikutaan tai mitä tietoa sivuilla on odotettavissa.
- Linkin avatessa tai ladatessa liitetiedoston käyttäjä joutuu jälleen uuteen käyttötilanteeseen eikä välttämättä edes kykene käsittelemään tiedostoa.
Varoittamiseen ei riitä usein nähty linkin perässä pieni kuvake, jossa esimerkiksi nuoli johtaa ulos sivusta. Avautuminen uuteen välilehteen tai siirtyminen uudelle sivulle tulisi kertoa selkeästi. Alla esimerkki
<a href="/lomakeohje" target="_blank">
Avaa ohje (avautuu uuteen välilehteen)
</a>
Huomaa, että varoituksen ilmaiseminen pelkästään avustaville tekniikoille tarkoitetuilla aria-attribuuteilla hyödyttää ainoastaan sellaisen avustavan tekniikan käyttäjiä, joille attribuutin sisältö luetaan.
Linkin teksti
Hyvä linkkiteksti on sellainen, joka kertoo selkeästi mihin linkki johtaa. Älä kuitenkaan käytä linkin näytettävänä sisältöä kohteen osoitetta (URL). Käytä mieluummin selostusta siitä mikä kohde on. Toki on tilanteita, jolloin osoite on ilmaistava tekstinä, joten käytä harkintaa. Saavutettavuus ei ole mustavalkoista on-off tekniikkaa. Alla esimerkissä käytetty aria-attribuuttia linkin kohteen ilmaisemiseksi ruudunlukuohjelmille.
<a href="https://seloit.fi"
target="_blank"
aria-label="Seloit, verkkosivujen tuotanto. avautuu uuteen välilehteen">
https://seloit.fi
</a>Linkit toiselle sivustolle
Mikäli linkki johtaa toiselle sivustolle voi sen myös avata uuteen välilehteen. Käytä tällöin selkeää linkin tekstiä sekä jo edellä esitettyä target="_blank" attribuutteja.
Uuteen välilehteen avautuvat linkit
Linkin avautuessa uuteen välilehteen varoita siitä käyttäjää. Katse edellä esimerkit.
Linkit tiedostoihin
Tiedoston avaavat tai lataavat linkit ovat erityisen tärkeitä ilmaista käyttäjille selkeästi. Tiedostoihin ja niiden käsittelyyn liittyy useitakin haasteita. Ja muista – myös tiedoston tulee olla saavutettava!
Linkitetty tiedosto voi olla sellainen, että käyttäjällä ei ole sen avaamiseen tarvittavaa sovellusta käytettävissään tai sivustoa selataan ja linkki valitaan laitteessa, jossa tiedoston käsittely ei ole mielekästä. Näin voi olla esimerkiksi selattaessa sivustoa puhelimessa.
Kun luot linkkejä tiedostoihin, varmista, että kohdetiedosto on myös saavutettava (toteutettu oikein). Kerro linkissä, että linkin kohde on tiedosto, mikä on tiedoston tyyppi sekä koko. Esimerkiksi:
<a href="/raportti.pdf">Lataa saavutettavuusraportti (PDF 2 Mt)</a>PDF-tiedostoista kannattaa huomata, että selaimet osaavat jo hyvin avata PDF-tiedostoja. Kuitenkin saavutettavuus tiedoston lukemisessa on riippuvainen myös lukemiseen käytetystä sovelluksesta ja sama tiedosto voi olla paremmin saavutettava luettaessa sitä Adobe Acrobat -ohjelmalla. Mikäli omassa testauksessasi huomaat tällaista, ohjeista käyttäjiä lataamaan tiedosto ja avaamaan se paikallisesti Acrobatilla.
Kuva linkkinä
Linkin näytettävänä sisältönä voi olla kuva. Usein näin onkin. Esimerkiksi ylätunnisteissa olevan organisaation logo on lähes järjestään linkki sivuston etusivulle. Tai linkki verkkokaupan ostoskorisivulle on ostoskorin kuvake.
Kun kuva toimii linkkinä, on kuvan vaihtoehtoisen sisällön (alt-attribuutin) tehtävä kertoa mihin linkki johtaa. Ei mitä kuva esittää. Käytettäessä kuvaa tai kuvaketta linkkinä on muistettava erityisesti avustavien tekniikoiden toiminta.
<a href="/etusivu">
<img src="/kuvat/logo.png" alt="siirry sivuston etusivulle" />
</a>Linkin kohde voidaan esittää myös käyttäen aria-attribuuttia kuten alla olevassa esimerkissä on ostoskorikuvakkeen linkissä.
<a href="/cart" aria-label="Avaa ostoskori">🛒</a>Leipätekstin sanat linkkeinä
Silloin tällöin mutta onneksi ei enää kovin usein tulee vastaan sisältöjä, joissa leipätekstiin on lisätty linkkejä. Linkit on muodostettu tekstikappaleen yksittäisistä sanoista tai sanapareista. Näihin liittyy muutamakin ongelma.
Ensinnäkin leipätekstistä poimitut sanat ovat harvoin taivutusmuodoltaan sellaisia, että ne kuvaisivat hyvin linkin kohdetta kun linkki otetaan pois leipätekstin kontekstista. Miksi sitten linkkiä pitäisi tarkastella ilman sitä ympäröivää tekstiä? Koska ruudunlukuohjelmat tarjoavat käyttäjilleen sellaisia sivujen sisältöön kohdistuvia avustavia näkymiä, joilla käyttäjät sisältöä selaavat. Yksi tällainen on esimerkiksi linkkilistaus, jossa ruudunlukuohjelma näyttää sivulla olevat linkit listana. Tällaisessa listassa leipätekstistä poimitut sanat ovat usein huonoja ilmaisemaan linkin kohdetta.
On parempi ilmaista linkit erikseen vaikkapa leipätekstin alla omana listanaan.
Esimerkki huonoista linkeistä
<p>Saavutettavuustestauksessa tutkitaan sivuston toiminta <a href="/avustavat_tekniikat">
avustavilla tekniikoilla</a> ja suoritetusta testauksesta saat yksityiskohtaisen
<a href="/testiraportti">raportin</a>, jossa tehdyt havainnot on kuvattu. Kaikista
havainnoista on kerrottu niiden vaikutus sekä esitetty korjausehdotus ja listattu ne
<a href="/WCAG_tulkinta">WCAG</a> kriteerit, joita havaitut puutteet koskevat.</p>Esimerkki paljon paremmista linkeistä, jotka on ilmaist erikseen omana listanaan
<p>Saavutettavuustestauksessa tutkitaan sivuston toiminta avustavilla tekniikoilla ja
suoritetusta testauksesta saat yksityiskohtaisen raportin, jossa tehdyt havainnot on
kuvattu. Kaikista havainnoista on kerrottu niiden vaikutus sekä esitetty korjausehdotus
ja listattu ne WCAG kriteerit, joita havaitut puutteet koskevat.</p>
<p>Aiheeseen liittyviä linkkejä</p>
<ul>
<li><a href="/avustavat_tekniikat">Tietoa avustavista tekniikoista</a></li>
<li><a href="/testiraportti">Saavutettavuustestauksen malliaraportti</a></li>
<li><a href="/WCAG_tulkinta">WCAG</a></li>
</ulKlikattavan alueen koko ja linkin teksti
Alueen koko, joka käyttäjälle toimii klikin kohteena on merkittävä. Liian pieni linkin kohde on vaikea osua ja siksi linkki on hyvä muodostaa riittävä suureksi. Linkin näytettävää sisältöä ei kuitenkaan pidä muodostaa miten sattuu. Jos linkin sisältö on pitkä tekstialue tai vaikkapa yhdistelmä kuva + otsikko + tekstikappale + painike, on klikattava alue suuri ja helposti osuttavissa tai kosketusnäytöillä tökättävissä. Tällainen linkin sisältö ei kuitenkaan ole toimiva ja ymmärrettävä avustaville tekniikoille.
Parempi ratkaisu on muodostaa yksi selkeä linkki ja CSS tyyleillä laajentaa klikattava alue laajemmaksi. Näin olen tehnyt esimerkiksi tämän sivuston etusivun Uusimmat artikkelit -elementeille tai artikkelit sivun artikkelilistauksen yksittäisille artikkeleille. Näin toimittuna jokaisella artikkelilla on selkeä artikkelia kuvaava linkkiteksti mutta interaktiivinen alue on laajempi. Tällaisen koodimalli on jo vähän pidempi, joten teen ehkä aiheesta myöhemmin oman artikkelin.
Lue lisää -linkit
Saman linkkitekstin sisältävät linkit samalla sivulla aiheuttavat ongelmia kun linkin teksti otetaan pois siitä sijainnista ja kontekstista, jossa se sivulla on. Esimerkiksi sivulla esiintyvässä artikkelien listauksessa voi esiintyä useaan kertaan linkin näytettävänä sisältönä vaikkapa teksti ”Lue lisää”. Jos ruudunlukuohjelman linkkilistauksessa on peräkkäin useita tällaisia linkkejä ovat ne täysin kelvottomia käyttäjille. Lue lisää – mistä?
Ratkaisu on eriyttää linkin näkyvä teksti ja avustaville tekniikoille luettavaksi tarkoitettu teksti. Tämä voidaan tehtä muutamallakin tavalla.
Yksi tapa on käyttää aria-label attribuuttia, jonka sisällöksi lisätään haluttu teksti ”Lue lisää ” ja sen perään ohjelmallisesti haettu linkin kohteena olevan sivun tai artikkelin otsikko. Esimerkiksi WordPress ympäristössä tämä on helpohkosti tehtävissä.
Toinen tapa on lisätä linkin näkyvän tekstin perään <span>-elementtiin linkin kohdetta kuvaava teksti. Esimerkiksi juuri edellä mainittu kohdesivun otsikko. Kun <span> elementti piilotetaan CSS tyyleillä, jää näkyväksi vain haluttu ”Lue lisää” mutta ruudunlukuohjelmat lukevat sen perään myös piilotetun <span> elementin sisällön. Muista vain, että <span> elementtiä ei saa piilotaa display: none; arvolla, jolloin se ei ole enää edes avustavien tekniikoiden luettavissa.
Lopuksi
Linkkejä lisättäessä kannattaa oikeasti miettiä mitä ja miten linkin muodostaa. Muista aina, että kaikki eivät käytä tai havainnoi sivun sisältöä samallatavoin ja toimi sen mukaan. Linkit ovat tärkeitä ja oikein toteutettuna ne ovat selkeitä ja hyödyllisiä aivan kaikille käyttäjille.