Linkkiteksti, joka on ymmärrettävä irrallaan

Miten ruudunlukijan käyttäjät todella navigoivat

Ennen kuin puhumme siitä, miten linkkitekstiä kirjoitetaan, on hyödyllistä ymmärtää, miten ihmiset todella käyttävät linkkejä, kun he eivät näe sivua.

Ruudunlukijat tarjoavat pikakomennon, jonka olemassaolosta useimmat näkevät käyttäjät eivät tiedä: yhden näppäimen painaminen (tyypillisesti kirjain L useimmissa ruudunlukijoissa) käy läpi kaikki sivun linkit lukien ne yksi kerrallaan, irrallaan asiayhteydestä. Käyttäjät hyödyntävät tätä selatakseen sivua nopeasti, tavalla, jolla näkevän käyttäjän silmä saattaisi silmäillä otsikoita ja toimintakehotuspainikkeita.

Jos sivullasi on kaksitoista linkkiä, joissa lukee “Lue lisää”, tuo lista on merkityksetön. Käyttäjä kuulee: “Lue lisää. Lue lisää. Lue lisää. Lue lisää…” He eivät voi tietää, mihin mikään niistä johtaa.

Tämä on perusongelma, jota linkkitekstin saavutettavuus yrittää ratkaista: jokaisen linkin on oltava itseään kuvaava, koska asiayhteys katoaa, kun navigoit linkeittäin.

Mitä WCAG sanoo

2.4.4 Linkin tarkoitus (asiayhteydessä) tasolla A vaatii, että jokaisen linkin tarkoitus voidaan päätellä pelkästä linkkitekstistä tai linkkitekstistä yhdessä sitä ympäröivän asiayhteyden kanssa (kappaleen, listakohdan, taulukon solun tai otsikon, jossa se sijaitsee).

2.4.9 Linkin tarkoitus (vain linkki) tasolla AAA menee pidemmälle vaatien linkin tarkoituksen pelkästä linkkitekstistä ilman asiayhteyteen nojaamista. Tähän pyrkiminen on hyvä idea, vaikka tähtäisit vain AA-vaatimustenmukaisuuteen.

2.5.3 Nimessä oleva selite (taso A) vaatii, että kun linkillä tai painikkeella on näkyvä tekstiselite, saavutettava nimi alkaa tuolla tekstillä. Kuvakepainike, jonka selite on “Lue lisää saavutettavuudesta” ja jonka aria-label on “Klikkaa tästä”, ei läpäise tätä kriteeriä.

Yleiset virheet ja mitä tehdä sen sijaan

”Klikkaa tästä” ja “Lue lisää”

Nämä ovat verkon laajimmalle levinneet linkkien saavutettavuusvirheet.

<!-- Ei läpäise: ei merkitystä irrallaan asiayhteydestä -->
<a href="/blog/wcag-compliance">Lue lisää</a>

<!-- Läpäisee: itseään kuvaava -->
<a href="/blog/wcag-compliance">Lue WCAG 2.2 -vaatimustenmukaisuusoppaamme</a>

Korjaus on lähes aina yksinkertainen: korvaa epämääräinen ilmaus tekstillä, joka kuvaa määränpäätä tai toimintoa.

Yleisluontoiset “tästä”-linkit

“Klikkaa tästä ladataksesi raportin” epäonnistuu samasta syystä — linkkisana itsessään on vain “tästä”.

<!-- Ei läpäise -->
<p>Katso täydelliset havainnot klikkaamalla <a href="/report.pdf">tästä</a>.</p>

<!-- Läpäisee: linkkiteksti kuvaa, mihin linkitetään -->
<p>Lataa <a href="/report.pdf">vuoden 2025 saavutettavuusauditointiraportti (PDF)</a>.</p>

Huomaa suluissa oleva PDF-merkintä — tämä on hyvä käytäntö, joka kertoo käyttäjille, että linkin seuraaminen avaa PDF-tiedoston verkkosivun sijaan.

Linkit samaan määränpäähän eri tekstillä tai eri määränpäihin samalla tekstillä

Molemmat luovat sekaannusta. Jos viidessä navigointilinkissä lukee kaikissa “Lue lisää” mutta ne osoittavat eri palvelusivuille, käyttäjät eivät voi ennustaa, mihin he päätyvät. Vastaavasti kaksi eri linkkiä, joissa lukee “WCAG-vaatimustenmukaisuusopas” mutta jotka johtavat eri sivuille, ovat yhtä hämmentäviä.

Vain kuvakkeesta koostuvat linkit ja painikkeet

Linkillä tai painikkeella, joka sisältää vain kuvakkeen — ei näkyvää tekstiä — on oltava saavutettava nimi, joka annetaan aria-label- tai aria-labelledby-määreen kautta. Ilman sitä ruudunlukijat kertovat kuvakekuvan tiedostonimen tai eivät kerro mitään.

<!-- Ei läpäise: kerrotaan muodossa "linkki, grafiikka" tai SVG:n tiedostonimi -->
<a href="/social/twitter">
  <svg><!-- twitter-kuvake --></svg>
</a>

<!-- Läpäisee: aria-label tarjoaa saavutettavan nimen -->
<a href="/social/twitter" aria-label="QualiBooth Twitterissä">
  <svg aria-hidden="true"><!-- twitter-kuvake --></svg>
</a>

SVG:n aria-hidden="true" estää ruudunlukijoita kertomasta SVG:n otsikkoa tai sisältöä — koska linkillä itsellään on jo selite, kuvakkeen sisältö on tarpeeton.

aria-labelin käyttö näkyvän tekstin täydentämiseen

Kun sivulla on useita “Lataa”-linkkejä etkä voi muuttaa näkyvää tekstiä (suunnittelurajoite), aria-label voi laajentaa saavutettavaa nimeä:

<!-- Näkyvä teksti on "Lataa" mutta saavutettava nimi on koko merkkijono -->
<a href="/report-2025.pdf" aria-label="Lataa vuoden 2025 saavutettavuusraportti PDF">
  Lataa
</a>

Varoituksen sana tässä: WCAG 2.5.3 vaatii, että saavutettava nimi alkaa näkyvällä tekstillä. “Lataa vuoden 2025 saavutettavuusraportti PDF” alkaa sanalla “Lataa” — hyvä. “Vuoden 2025 saavutettavuusraportti — Lataa PDF” ei ala — huono.

Linkit, jotka avautuvat uuteen välilehteen

Uuden välilehden avaaminen ilman varoitusta hämmentää käyttäjiä, erityisesti niitä, joilla on kognitiivisia vaikeuksia, tai ruudunlukijan käyttäjiä, jotka eivät ehkä huomaa, mitä tapahtui. Osoita uuteen välilehteen avautuva toiminta linkkitekstissä tai visuaalisesti piilotetulla huomautuksella.

<!-- Osoittaa uuteen välilehteen avautuvan toiminnan visuaalisesti ja avustavalle teknologialle -->
<a href="https://example.com" target="_blank">
  Katso esimerkkiraportti
  <span class="sr-only">(avautuu uuteen välilehteen)</span>
</a>

Kun linkkiteksti toimii olematta ilmeinen

Asiayhteys voi laillisesti tarjota puuttuvan merkityksen WCAG 2.4.4:n mukaisesti. “Lataa”-linkki on hyväksyttävä, jos se sijaitsee taulukon solussa, jonka sarakeotsikko on “Vuosikertomus” ja jonka riviotsikko on “2025”. Asiayhteys tekee tarkoituksen selväksi.

Tämä eroaa “Lue lisää” -linkistä itsenäisen kappaleen lopussa. Kappale tarjoaa asiayhteyden, mutta “Lue lisää” epäonnistuu silti, koska linkkiteksti voisi soveltua mihin tahansa kappaleeseen — se ei yksilöi määränpäätä yksiselitteisesti.

Kuvalinkit

Kun linkin sisältö on kuva tekstin sijaan, kuvan alt-määreestä tulee linkin saavutettava nimi. Vaihtoehtoisen tekstin tulisi kuvata linkin määränpäätä, ei itse kuvaa.

<!-- Alt kuvaa linkin määränpään, ei kuvan ulkonäköä -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Saavutettavuusauditointipalvelut">
</a>

Jos kuva on puhtaasti koristeellinen ja sitä seuraa näkyvä teksti samassa linkissä, kuvalla tulisi olla alt="", jotta samaa tekstiä ei kerrota kahdesti.

Nopea auditointi, jonka voit tehdä itse

Avaa sivusi ja hae esiin linkkien lista ruudunlukijallasi (tai asenna ilmainen HeadingsMap- tai WAVE-selainlaajennus nähdäksesi linkit poimittuina irti asiayhteydestä). Lue lista läpi. Jos et voi kertoa pelkästä tekstistä, mihin kukin linkki johtaa, se tarvitsee työstöä.

Yleisin korjaus on lisätä <span class="sr-only"> (visuaalisesti piilotettu, ruudunlukijoille saavutettava) lisäasiayhteydellä tai yksinkertaisesti kirjoittaa linkkiteksti kokonaan uudelleen. Uudelleenkirjoittaminen on aina suositeltavampaa — se usein parantaa käytettävyyttä kaikille, ei vain ruudunlukijan käyttäjille.

Sivustosi linkkien ja muiden WCAG-kriteerien perusteelliseen tarkasteluun manuaaliset saavutettavuusauditointimme kattavat linkin tarkoituksen osana laajempaa tarkastelua, jonka tekevät testaajat, jotka käyttävät avustavaa teknologiaa joka päivä.