Ruudunlukijan linkit

Silktide löytää linkkielementtejä, jotka ovat virheellisiä tavoilla, jotka estävät niiden käytön avustavalla teknologialla: linkkejä, joissa ei ole luettavaa tekstiä, linkkejä, joilla ei ole kohdetta, sekä sivulle jääneitä irrallisia tyhjiä linkkitunnisteita.

Jotta linkki toimisi avustavan teknologian kanssa, sillä on oltava sekä kohde (href-attribuutti) että sen sisällä jotain luettavaa:

<!-- Toimii: kohde ja luettava teksti -->
<a href="/about">Tietoa meistä</a>

<!-- Toimii: kuvalinkki, jossa on vaihtoehtoinen teksti -->
<a href="/apple"><img src="apple.png" alt="Omena"></a>

Miksi tämä on tärkeää

Ruudunlukija ilmoittaa jokaisen linkin sen tekstin perusteella. Linkki, jolla on kohde mutta ei tekstiä, ilmoitetaan pelkkänä "linkkinä" – käyttäjä voi aktivoida sen, mutta ei tiedä, mihin se johtaa. Linkki, jolla on teksti mutta ei kohdetta, vaikuttaa napsautettavalta, mutta ei johda mihinkään. Molemmat mallit rikkovat perussopimuksen, jonka avulla avustavaa teknologiaa käyttävät ihmiset voivat selata sivua sen linkkien avulla.

Näin korjaat ongelman

1. Jos linkillä on kohde mutta ei luettavaa tekstiä: lisää linkin sisään tekstiä tai vaihtoehtoinen teksti, jos se sisältää vain kuvan.
2. Jos linkillä on teksti mutta ei kohdetta: lisää puuttuva href tai, jos elementti on todellisuudessa kohde, johon muut linkit hyppäävät, siirrä sen id muuhun kuin linkkielementtiin:

<!-- Vanha kohdeankkuri, ei suositella HTML5:ssä -->
<a name="example"></a>

<!-- Suositeltu: id tavallisessa elementissä -->
<div id="example">...</div>

3. Jos tyhjillä <a></a>-tunnisteilla ei ole lainkaan attribuutteja: poista ne, sillä niillä ei ole mitään tarkoitusta. Editorit tai komentosarjat jättävät niitä usein jäljelle.
4. Jos elementti on todellisuudessa painike – se käynnistää toiminnon sen sijaan, että siirtyisi toiselle sivulle – käytä <button>-elementtiä tai lisää role="button" olemassa olevaan tunnisteeseen.

Miten Silktide testaa tämän

1. Etsi sivun jokainen <a>-elementti ja lue sen teksti (mukaan lukien kuvien vaihtoehtoinen teksti ja CSS:n lisäämä teksti), sen href sekä mahdolliset id- tai name-attribuutit.
2. Merkitse kolme ongelmamallia:
   • Linkki, jolla on href mutta ei luettavaa tekstiä.
   • Elementti, jolla on teksti ja id tai name mutta ei href-attribuuttia – kohde, joka esittää linkkiä, tai linkki, jolta puuttuu kohde.
   • Täysin tyhjä ankkuri, jolla ei ole tekstiä, href-, id- eikä name-attribuuttia.
3. Kahta mallia ei tarkoituksellisesti merkitä:
   • <a>, jolla on teksti mutta ei href-, id- eikä name-attribuuttia – HTML5 sallii tämän "paikkamerkkilinkkinä", joka täytetään tavallisesti myöhemmin JavaScriptillä.
   • Tyhjät ankkurit, joilla on id tai name mutta ei href-attribuuttia – nämä ovat vanhoja hyppykohteita, eivät linkkejä.

Lisätietoja

• Onnistumiskriteerin 4.1.2 Nimi, rooli, arvo ymmärtäminen (WCAG 2.2)
• H91: HTML-lomakeohjausobjektien ja linkkien käyttäminen (WCAG-tekniikka)
• Linkin tarkoitus
• Tyhjä linkki