Lenker for skjermlesere

Silktide finner lenkeelementer som er feil utformet på måter som gjør at de ikke fungerer for hjelpemiddelteknologi – lenker uten lesbar tekst, lenker uten mål og løse, tomme lenketagger som er igjen på siden.

For at en lenke skal fungere med hjelpemiddelteknologi, trenger den både et mål (et href-attributt) og noe lesbart inni seg:

<!-- Fungerer: mål og lesbar tekst -->
<a href="/about">Om oss</a>

<!-- Fungerer: en bildelenke med alternativ tekst -->
<a href="/apple"><img src="apple.png" alt="Apple"></a>

Hvorfor dette er viktig

En skjermleser leser opp hver lenke basert på teksten. En lenke med et mål, men uten tekst, leses bare opp som «lenke» – brukeren kan aktivere den, men har ingen anelse om hvor den fører. En lenke med tekst, men uten mål, ser klikkbar ut, men fører ingen steder. Begge mønstrene bryter den grunnleggende funksjonen som gjør det mulig for personer som bruker hjelpemiddelteknologi, å navigere på en side ved hjelp av lenkene.

Slik løser du det

1. For en lenke med et mål, men uten lesbar tekst: legg til tekst inni lenken, eller alternativ tekst hvis den bare inneholder et bilde.
2. For en lenke med tekst, men uten mål: legg til det manglende href-attributtet. Hvis elementet egentlig er et mål som andre lenker skal hoppe til, flytter du i stedet id-attributtet til et element som ikke er en lenke:

<!-- Eldre målanter, frarådes i HTML5 -->
<a name="example"></a>

<!-- Anbefalt: en id på et vanlig element -->
<div id="example">...</div>

3. For tomme <a></a>-tagger uten attributter: fjern dem, siden de ikke har noen funksjon. De blir ofte liggende igjen etter redigering eller fra skript.
4. Hvis elementet egentlig er en knapp – det utløser en handling i stedet for å navigere – bruker du et <button>-element eller legger til role="button" i den eksisterende taggen.

Slik tester Silktide dette

1. Finn alle <a>-elementer på siden og les teksten deres (inkludert alternativ tekst for bilder og tekst som legges til med CSS), href-attributtet og eventuelle id- eller name-attributter.
2. Marker tre problematiske mønstre:
   • En lenke med et href-attributt, men uten lesbar tekst.
   • Et element med tekst og en id eller name, men uten href – et mål som utgir seg for å være en lenke, eller en lenke som mangler målet sitt.
   • Et helt tomt anker uten tekst, href, id eller name.
3. To mønstre markeres med hensikt ikke:
   • <a> med tekst, men uten href, id eller name – HTML5 tillater dette som en «plassholderlenke», som ofte fylles ut senere av JavaScript.
   • Tomme ankere med en id eller name, men uten href – dette er eldre hoppmål, ikke lenker.

Finn ut mer

• Understanding Success Criterion 4.1.2: Name, Role, Value (WCAG 2.2)
• H91: Using HTML form controls and links (WCAG technique)
• Lenkeformål
• Tom lenke