Tilgjengelige lenker i HTML: konkrete grep som gjør siden din enklere å bruke

Lenker er blant de viktigste byggeklossene på nettet. Likevel er det ofte her både brukervennlighet og tilgjengelighet ryker først, med uklare tekster, klikkbare områder som er for små og navigasjon som blir uforståelig uten mus.

Med noen enkle og bevisste valg kan du gjøre lenkene dine langt tydeligere, tryggere og mer inkluderende, uten store omskrivinger eller nye verktøy.

Hva kjennetegner en god lenke?

En god lenke er lett å se, lett å forstå og lett å treffe. Det gjelder både for folk som bruker skjermleser, tastatur eller berøringsskjerm, og for de som bare skumleser innholdet.

Målet er at lenken skal gi mening uten forklaring rundt, være visuelt tydelig og fungere for alle måter å navigere på. Dette krever ikke avansert kode, bare litt struktur og konsekvens.

Meningsfull lenketekst

Den vanligste feilen er generiske tekster som «les mer», «klikk her» eller bare et ikon. For skjermleserbrukere og de som raskt scanner siden, er dette nesten ubrukelig når lenkene leses uten kontekst.

Prøv å skrive lenketekst som fungerer alene. Tenk at brukeren får lest bare selve lenken, ikke avsnittet rundt. «Les mer om våre priser» er langt bedre enn bare «les mer».

Konkrete eksempler på god og dårlig lenketekst

Små justeringer i tekst kan gjøre stor forskjell. Ofte handler det om å flytte litt informasjon inn i selve lenken i stedet for å la den stå bare i teksten rundt.

Nedenfor er noen eksempler som ligner reelle situasjoner mange nettsteder har.

Eksempel 1: Informasjonsside

Dårlig variant:

«For å se åpningstidene våre kan du klikke her.»

Bedre variant:

«Se åpningstidene våre for alle avdelinger.»

Eksempel 2: Nedlasting

Dårlig variant:

«Last ned»

Bedre variant:

«Last ned årsrapport som PDF»

Semantisk riktige lenker i HTML

Lenker skal være lenker, ikke knapper som ser ut som lenker, eller div-er med klikk-hendelser. I HTML betyr det at navigasjon mellom sider og seksjoner skal skje med<a>, ikke med andre elementer som manuelt får klikkhåndtering.

Skillelinjen er enkel: Når du går til en ny side, et anker på samme side eller starter en nedlasting, er det en lenke. Når du utfører en handling i en applikasjon, som å sende inn et skjema, er det normalt en knapp.

Aria og ekstra attributter

For mange lenker er ren, semantisk HTML nok. Unngå å legge til ARIA-attributter bare for å «gjøre det mer tilgjengelig» hvis du ikke vet hva de gjør. Feil bruk kan forvirre hjelpemidler.

Ekstra attributter kan være nyttige når du for eksempel åpner lenker i nye vinduer. Da eraria-labeleller tekst i selve lenken som informerer om det, et bedre valg enn å holde brukeren uvitende.

Ikoner og lenker som bare er grafikk

Mange moderne grensesnitt har ikon-knapper og ikon-lenker, som et «penn»-ikon for redigering eller et «papirkurv»-ikon for sletting. For synsfriske brukere kan det se åpenbart ut, men for andre kan det være uklart.

Hvis du bruker ikoner som lenker, sørg for at de enten har en tydeligaria-labeleller synlig tekst som beskriver målet, og at ikonet har godt nok kontrastforhold mot bakgrunnen.

Lenker med både ikon og tekst

En trygg løsning er å kombinere ikon og kort tekst, som «Rediger» sammen med et penn-ikon. Da får du både visuell gjenkjenning og tydelig funksjon for alle.

Dette er særlig nyttig i tabeller eller handlingslister der samme type lenke går igjen mange ganger.

Tydelig visuelt skille for lenker

Brukere forventer at lenker ser ut som lenker. Hvis hele designtematikk går ut på å skjule hva som kan klikkes, øker du kognitiv belastning og gjør siden tyngre å navigere.

Et godt utgangspunkt er at lenker har:

• En tydelig farge som skiller seg fra brødteksten
• Understrekning, spesielt i løpende tekst
• En tilstand for hover, fokus og besøkt tilstand

Kontrast og fargebruk

Ikke stol bare på farge for å markere lenker. For mange er det vanskelig å se små fargeforskjeller, og enkelte skjermer eller lysforhold gjør forskjeller utydelige.

Kombinasjonen av farge og understrekning gir et robust visuelt signal, også for de som har fargeblindhet eller lav synsskarphet.

Fokusmarkering og tastaturnavigasjon

En svært vanlig feil er å «designe bort» fokusrammen rundt lenker og knapper, ofte med CSS som fjerner outline. For brukere som navigerer med tastatur, er fokusmarkeringen avgjørende for å vite hvor de er på siden.

Sørg for at alle lenker kan fokuseres med Tab og at fokus er tydelig synlig. Du kan gjerne tilpasse stilen, men ikke fjerne den helt.

Rekkefølge og logikk i tabbing

Tab-rekkefølgen bør følge den visuelle leseretningen. Unngå å manipulere rekkefølgen med for eksempeltabindexutover spesielle tilfeller, siden dette fort fører til uforutsigbar navigasjon.

Test selv ved å legge bort musen og gå gjennom siden med Tab og Enter. Hvis du mister oversikten, vil andre gjøre det samme.

Lenker som åpner nye vinduer eller faner

Noen ganger er det ønskelig at lenker åpner i ny fane, for eksempel eksterne ressurser eller dokumenter. Dette kan likevel være forvirrende hvis brukeren ikke får beskjed og plutselig opplever at tilbakaknappen ikke gjør det som forventes.

Vær tydelig når en lenke åpner noe nytt. Det kan gjøres i selve teksten, med et lite ikon og tekstforklaring, eller med en skjermleservennlig merking.

Sikker håndtering av eksterne lenker

Hvis du brukertarget=”_blank”, er det lurt å kombinere dette medrel=”noopener noreferrer”for å redusere risiko knyttet til at den nye siden kan påvirke den opprinnelige.

Dette er en enkel attributtendring som gjør løsningen tryggere uten at brukeren merker noe direkte.

En kort sjekkliste før publisering

Før du publiserer en side eller artikkel, kan du ta en rask runde og se på lenkene med «tilgjengelighetsbriller». Det trenger ikke ta lang tid, men kan spare deg for mange små irritasjonsmomenter.

Still deg selv disse spørsmålene:

• Gir lenketekstene mening hvis de leses uten kontekst?
• Er det tydelig hva som er klikkbart, også uten mus?
• Har alle lenker fokusmarkering, og er den godt synlig?
• Finnes det lenker som åpner nye faner uten informasjon om det?

Om svaret på de fleste spørsmålene er ja, er du allerede et godt stykke på vei mot lenker som er hyggeligere å bruke for langt flere.