Tilgjengelige lenker på nettsiden din: konkrete grep som gjør stor forskjell

Lenker er kanskje det mest grunnleggende vi har på web, men også noe av det mest oversette. Mange nettsteder har lenker som er vanskelige å se, uklare å forstå eller nesten umulige å bruke med tastatur og skjermleser.

Med noen få bevisste valg kan du gjøre lenkene dine mye mer forståelige, tilgjengelige og brukbare, uten store ombygginger. Her ser vi på hva som faktisk hjelper i hverdagen, både for besøkende og for deg som skal vedlikeholde innholdet.

Gode lenketekster: slutt på «klikk her»

Det viktigste du kan gjøre er å skrive tydelige lenketekster. Mange skriver fortsatt «klikk her», «les mer» eller «se mer». Disse tekstene gir ingen mening når de leses uten sammenheng, for eksempel av skjermlesere som kan vise en liste over alle lenker på siden.

En god lenketekst beskriver målet med lenken, ikke handlingen. I stedet for «klikk her for rapporten» bør du skrive noe slikt: «Last ned årsrapporten for 2024 (PDF)». Da forstår leseren både hva som skjer og hva som venter på neste side.

Slik forbedrer du lenketekstene

• Beskriv målet: hva får personen ved å følge lenken.
• Unngå rene handlingsord som «klikk», «trykk», «les» alene.
• Ikke bruk hele setninger som lenke hvis bare ett ord er viktig.
• Merk tydelig når lenken går til filnedlasting eller ekstern side.

En nyttig vane er å lese lenken høyt for deg selv som om den stod alene. Høres den fortsatt forståelig ut, er du på rett vei.

HTML-struktur: bruk riktige elementer for lenker

Tidvis brukes<div>eller<span>med klikkhåndtering i JavaScript på steder hvor det egentlig burde være en lenke. Det kan gjøre løsningen vanskelig å bruke med tastatur, og verktøy som skjermlesere oppfatter det ikke som en navigerbar lenke.

En faktisk lenke skal alltid være et<a>-element medhref-attributt. Navigasjon internt på siden, til andre sider eller til filer bør alle være ekte lenker, ikke kun klikkbare flater styrt av script.

Vanlige feil og bedre alternativer

• Ikke brukonclickpå en<div>for å gå til en side, bruk<a href=”…”>.
• Gjør hele knapper som leder til nye sider om til lenker i stedet for<button>, der det gir mening.
• Bruk knapp (<button>) til handlinger på samme side, som å åpne en modal eller sende inn et skjema.

Denne ryddige inndelingen mellom lenker og knapper gjør løsningen mer forutsigbar for alle som er vant til hjelpemidler, og gir deg færre spesialtilfeller å ta høyde for i kodebasen.

Synlige lenker: kontrast, farge og understreking

Mange design bruker veldig svake farger eller fjerner understreking på lenker. Det kan se pent ut i designverktøyet, men skaper problemer for folk med nedsatt syn eller som ser siden på en skjerm med dårlig lys og kontrast.

En god tommelfingerregel er at lenker skal være tydelig annerledes enn vanlig tekst. Farge alene er ofte ikke nok, spesielt hvis fargen er lys eller lik andre elementer på siden.

Enkle, robuste grep i CSS

• Behold understrek på lenker i brødtekst, eventuelt kun fjernet i navigasjonsmenyer der oppsettet er veldig tydelig.
• Sørg for tilstrekkelig kontrast mellom lenkefarge og bakgrunn, og også mellom lenkefarge og vanlig tekst.
• Bruk:hoverog:focusfor å gi klar visuell respons når lenken får fokus med mus eller tastatur.

Hvis du må fjerne understrek i brødtekst av designgrunner, bør du minst gi en tydelig understrek på:hoverog:focus, og passe ekstra godt på kontrasten.

Tastaturnavigasjon og fokus: gjør det mulig å «tabbe» seg gjennom

Alle lenker skal kunne nås med tastatur, ofte ved hjelp av Tab-tasten. Mange mister dette når de bruker tilpassede komponenter, overlays eller blokkerer fokusrammer med CSS.

Det viktigste du kan gjøre er ofte å la nettleseren gjøre jobben. Unngå å fjerne fokusmarkering med regler somoutline: noneuten å legge til noe annet like tydelig.

Konkrete tips for bedre fokus

• Test siden ved å bruke Tab gjennom hele innholdet, og se hvor fokus forsvinner.
• Gi tydelig fokusstil med CSS, for eksempel en kontraststerk ramme eller bakgrunn på lenker i fokus.
• Unngå å fange fokus inne i komponenter uten å gi mulighet til å forlate dem igjen med tastatur.

Denne typen sjekk tar kort tid, men oppdager ofte hindringer som aldri ville bli oppdaget med kun musebruk og visuell test.

Eksterne lenker, nye vinduer og filer

Lenker som åpner i ny fane eller leder til filer som PDF og dokumenter, bør merkes tydelig. Ellers kan opplevelsen føles forvirrende, spesielt for dem som navigerer med tastatur eller skjermleser.

En typisk utfordring er å bruketarget=”_blank”uten å gi beskjed i teksten. Det gjør det vanskeligere for folk å forstå hvor de befinner seg og hvordan de kommer tilbake.

Slik gjør du det mer forutsigbart

• La som hovedregel lenker åpne i samme fane, med mindre det er en tydelig grunn til noe annet.
• Merk eksterne lenker i teksten, for eksempel «(åpner ekstern side)».
• Oppgi filtype og størrelse når du lenker til filer, som «Produktkatalog (PDF, 3 MB)».

Dette gir lavere frustrasjon og færre supporthenvendelser fra folk som «mister» seg selv i nye vinduer eller får uventede nedlastinger.

Internlenker og anker: hjelp leseren å hoppe riktig

Lenker som hopper til deler av samme side, kan være nyttige for lange sider, produktoversikter og rapporter. Men de må treffe riktig sted og gi en god visuell indikasjon på at man har flyttet seg.

Ved bruk av ankerlenker bør du sørge for at målelementet har en fornuftig overskrift og at eventuelle faste toppmenyer ikke dekker innholdet som skal vises.

Tenk helhetlig struktur

• Bruk meningsfulle id-er på overskrifter som «kontakt» eller «priser» i stedet for generiske navn.
• Sjekk at rulling stopper slik at overskriften faktisk er synlig og ikke skjules bak navigasjon.
• Vurder en «Hopp til innhold»-lenke øverst på siden, som lar tastaturbrukere hoppe forbi toppmeny og til hovedinnhold.

Slike små grep gjør det enklere å navigere på store sider, og gir samtidig en mer profesjonell og gjennomtenkt opplevelse.

En kort sjekkliste du kan bruke i morgen

For å komme i gang kan du velge én viktig side og se spesielt på lenkene der. Bruk denne enkle sjekklisten:

• Gir lenketekstene mening hvis du leser bare dem og ingenting rundt?
• Er alle navigasjonslenker faktisk<a>-elementer medhref?
• Er det tydelig visuelt hva som er lenker i brødteksten?
• Kan du nå alle lenker med Tab-tasten, og ser du alltid hvor du er?
• Er eksterne lenker og filnedlastinger tydelig merket?

Finner du mangler, kan du rette opp litt etter litt. Små forbedringer i lenker gir ofte uforholdsmessig stor gevinst for både tilgjengelighet, kvalitet og tillit til nettstedet ditt.