Kuvaus: Digitaalinen kuva kahdesta henkilöstä, jotka tekevät yhteistyötä työpöydän ääressä, ympärillään erilaisia digitaalisia linkkikuvakkeita ja viestintäsymboleja.
Esteettömien linkkien kirjoittamisen parhaat käytännöt
Lukuaika: 5 minuuttia
Esteetön linkki parantaa verkkosivuston esteettömyyttä varmistamalla, että se on selkeä, ytimekäs ja informatiivinen kaikille käyttäjille. Verkkosisällön esteettömyyssuuntaviivojen (WCAG), Euroopan esteettömyyslain (EAA) ja amerikkalaisten vammaisten lain (ADA) mukaisesti merkityksellisen ja kuvaavan linkkitekstin tarjoaminen on keskeinen osa verkkosisällön esteettömyyden varmistamista. Nämä standardit korostavat tarvetta luoda linkkejä, jotka ovat helposti ymmärrettävissä erillään, tarjoten käyttäjille saumattoman selauskokemuksen. Esteetön linkki tulisi olla ymmärrettävä myös kontekstista irrallaan, erityisesti näytönlukijaa käyttäville käyttäjille.
Alla on 16 parasta käytäntöä linkkitekstien kirjoittamiseen, jotka takaavat, että jokainen linkki on suunniteltu intuitiivisesti helpottamaan navigointia ja ymmärtämistä:
- Testaa värikontrasti. Linkkitekstin ja taustan välinen suuri kontrasti varmistaa, että käyttäjät, myös näkövammaiset, voivat helposti tunnistaa linkit ja käyttää niitä.
- Poista rikkoutuneet tai tyhjät linkit. Toimivat linkit ovat käyttäjäystävällisyyden kannalta erittäin tärkeitä. Rikkoutuneet tai tyhjät linkit turhauttavat käyttäjiä, etenkin aputeknologioita käyttäviä käyttäjiä, koska ne johtavat umpikujaan.
- Älä koskaan käytä URL-osoitetta linkkitekstinä. Pitkät , kuvaamattomat URL-osoitteet eivät tarjoa hyödyllistä kontekstia, mikä vaikeuttaa käyttäjien, etenkin näytönlukijoita käyttävien, linkin kohteen ymmärtämistä.
- Vältä URL-osoitteiden käyttöä linkkitekstinä. Kuvaileva linkkiteksti auttaa kaikkia käyttäjiä ymmärtämään linkin tarkoituksen, mikä parantaa selkeyttä ja verkkosivuston esteettömyyttä näytönlukijoille.
- Varoita käyttäjää aina, kun avaat uusia ikkunoita. Odottamattomat toiminnot, kuten linkkien avaaminen uusissa ikkunoissa tai välilehdissä, voivat hämmentää käyttäjiä, ellei sitä ole selkeästi ilmoitettu linkin tekstissä.
- Suunnittele sivusto ottaen huomioon vain näppäimistöä käyttävät käyttäjät. Pelkästään näppäimistöllä tapahtuva navigointi on erittäin tärkeää fyysisesti vammaisille käyttäjille. Kaikkien linkkien ja interaktiivisten elementtien saatavuus näppäimistöllä parantaa sivuston esteettömyyttä.
- Ole varovainen, kun käytät kuvia linkkeinä. Linkkeinä käytettävien kuvien on sisällettävä kuvaava vaihtoehtoinen teksti, jotta näkövammaiset käyttäjät voivat ymmärtää, mihin linkki johtaa.
- Linkkien alleviivaamisen perusteet. Linkkien alleviivaaminen on yksi luotettavimmista ja yleisimmin käytetyistä tavoista osoittaa klikattava teksti, erityisesti käyttäjille, joilla on vaikeuksia erottaa värejä toisistaan.
- Pidä linkkiteksti tiiviinä. Selkeä ja tiivis linkkiteksti parantaa käyttökokemusta vähentämällä kognitiivista kuormitusta ja helpottamalla näytönlukijoiden linkin tarkoituksen tulkintaa.
- Älä linkitä suoraan latauksiin. Anna aina konteksti, kun linkität ladattavaan tiedostoon, jotta käyttäjät eivät lataa vahingossa sisältöä, jota he eivät odottaneet.
- Rajoita tekstilinkkien määrää sivulla. Liian monien linkkien käyttäminen voi häiritä navigointia ja vaikeuttaa sivun käyttöä, erityisesti näytönlukijaa käyttäville käyttäjille.
- Käytä ankkurilinkkejä harkiten. Ankkurilinkkejä tulisi käyttää säästeliäästi ja selkeiden ohjeiden kera, jotta ne eivät häiritse käyttäjän kokemusta sivulla.
- Älä käytä sanaa "linkki" linkeissäsi. Tämä termi on tarpeeton linkkitekstissä, ja sen pois jättäminen auttaa säilyttämään selkeän ja tiiviin rakenteen.
- Vältä ASCII-merkkejä. ASCII-merkit voivat hämmentää näytönlukijoita tai käyttäjiä, jotka eivät tunne niiden merkitystä, mikä heikentää linkkien selkeyttä.
- Älä kirjoita linkkejä isoilla kirjaimilla. Isojen kirjaimien välttäminen linkkitekstissä parantaa luettavuutta ja ymmärrettävyyttä, erityisesti näytönlukijoille.
- Huomioi sivunumerointi ja aakkosjärjestyksessä olevat linkit. Vaikka ne ovat tärkeitä tietyntyyppiselle sisällölle, niiden prioriteetti on alhaisempi, koska niiden vaikutus riippuu enemmän sivuston tyypistä.
ARIA-tunnisteet ja esteettömät linkkitekstit
Esteettömän linkin suunnittelussa on viestittävä sen tarkoitus selkeästi kaikille käyttäjille. ARIA-tunnisteet (Accessible Rich Internet Applications) ovat arvokas työkalu verkkosisällön esteettömyyden parantamiseen, erityisesti silloin, kun natiivit HTML-elementit eivät välitä interaktiivisen elementin tarkoitusta tai toimintoa täysin. ARIA-tunnisteet ovat HTML-tunnisteisiin lisättyjä attribuutteja, jotka tarjoavat lisäkontekstia näytönlukijoille ja auttavat näkövammaisia käyttäjiä navigoimaan verkkosivustolla helpommin. Väärin käytettynä ARIA-tunnisteet voivat aiheuttaa sekaannusta tai ongelmia verkkosisällön esteettömyydessä, koska ne eivät välttämättä heijasta tarkasti linkin tai elementin tarkoitettua toimintoa. ARIA-tunnisteiden tulisi aina täydentää olemassa olevaa sisältöä sen sijaan, että ne korvaisivat sen, ja niitä on käytettävä tavalla, joka ei häiritse muita esteettömyysstandardeja. Linkkien kohdalla ARIA-tunnisteet selventävät tarkoitusta, kun tavallinen linkkiteksti on liian lyhyt tai puutteellinen. Esimerkiksi, jos linkin näkyvä teksti on "Lue lisää", voidaan lisätä ARIA-tunniste selventämään, mihin sisältöön käyttäjä ohjataan, kuten "Lue lisää esteettömästä verkkosuunnittelusta".
Tässä on muutamia käytännön vinkkejä esteettömien ARIA-tunnisteiden luomiseen.
- Ennen kuin turvaudut ARIA-tunnisteisiin, varmista, että käytät oikeita semanttisia HTML-elementtejä. Semanttinen HTML on luonnostaan esteetön ja sen tulisi aina olla ensisijainen valintasi. Linkit, painikkeet ja otsikot tulisi koodata käyttämällä niiden vastaavia HTML-tunnisteita, jotta niiden rooli ja tarkoitus välittyvät automaattisesti.
- ARIA-tunnisteiden tulisi olla selkeitä, mutta lyhyitä. Liian monimutkaiset tai pitkät tunnisteet voivat hämmentää käyttäjiä tai hidastaa navigointia näytönlukijoita käyttäville. Esimerkiksi sen sijaan, että painikkeeseen lisättäisiin liian yksityiskohtainen tunniste, kuten ”Painike palautteen lähettämiseksi verkkosivuston esteettömyyden parantamiseksi”, on parempi käyttää lyhyempää ARIA-tunnistetta, kuten ”Lähetä palaute”.
- Ensisijaisena tavoitteenasi tulisi olla merkityksellisen linkkitekstin käyttö aina kun mahdollista. ARIA-tunnisteet on tarkoitettu täydentämään linkkitekstiä, ei korvaamaan sitä. Jos linkkiteksti on itsessään riittävän selvä, ARIA-tunnistetta ei välttämättä tarvita. Jos kuitenkin tarvitaan lisäselvennystä – esimerkiksi linkkien tekstin ollessa epäselvä – ARIA-tunnisteet voivat tarjota lisätietoja, jotka parantavat sivun yleistä esteettömyyttä. ARIA-tunnisteiden käyttö parantaa esteettömän linkin selkeyttä ilman, että visuaalinen käyttöliittymä ylikuormittuu.
Kun sovitat näitä periaatteita verkkosisältöösi, muista, että jokainen linkki on lupaus käyttäjälle – lupaus relevanssista, tiedosta ja arvosta. Kun asetat esteettömän linkkitekstin etusijalle, et vain paranna käyttökokemusta, vaan rakennat siltoja digitaalisen kuilun yli ja teet verkosta kaikille avoimen tilan.
Anna linkkien kertoa tarina, ohjata matkaa ja tarjota selkeä polku tietoon. Anna jokaisen kävijän navigoida luottavaisesti ja varmuudella, että heidän kokemuksensa sivustollasi on yhtä kattava ja rikastuttava kuin muillakin sivustoilla. Tämä on todellisen esteettömyyden ydin: saumaton, intuitiivinen ja kunnioittava vuoropuhelu kaikkien käyttäjien kanssa.
Lue lisää tarjoamistamme eurooppalaisen esteettömyyslain palveluista.
EAA on ollut voimassa28. kesäkuuta 2025 lähtien.
