Gå til hovedinnhold

Lenker i tekst og innhold

Relevante krav​

  • 2.4.4 Formål med lenke (i kontekst) (Nivå A)
  • 1.4.1 Bruk av farge (Nivå A)
  • 1.3.2 Meningsfylt rekkefølge (Nivå A)
  • 2.5.5 Målstørrelse (Nivå AAA - Ikke lovpålagt)
  • 2.4.1 Hoppe over blokker (Nivå A)

Brukergrupper​

  • Elever
  • Lærere
  • Blinde og svaksynte
  • Elever med motoriske utfordringer

Formål​

Formålet med kravene er at lenker som brukes skal være til nytte for elever, samtidig som de ikke forstyrrer eller gjør navigasjon unødig vanskelig. Bruk av lenker og tilhørende lenketekst i kontekst skal fungere i samspill med det pedagogiske formålet, for aktuell elevgruppe.

Designerrollen​

Som designer er det ditt ansvar å sørge for at lenker som er en del av navigasjonen i læremidlet er utformet på en tilgjengelig måte. Dette innebærer universell utforming av lenker i navigasjon samt at det tas høyde for at læremidlet skal navigeres av elever fra forskjellige aldersgrupper og med ulike forutsetninger for å navigere. Det er derfor viktig å være bevisst på hvilke deler av læremidlets navigasjon som er tiltenkt bruk av lærere og hva som er ment for elever.

Bestepraksis​

Lenketekst​

Bruk lenketekst som gir mening alene og i henhold til kontekst.

Stiling av lenker​

Lenker skal ikke stiles med kun farge. Bruk understreking eller annen markering, i tillegg til farge, for å skille lenker fra vanlig tekst (WCAG-standarden 1.4.1 Bruk av farge (Nivå A)(Åpnes i ny fane))

Lenker (og elementer generelt) skal se ut som det de er. Stil derfor lenker slik at de ser ut som lenker og ikke for eksempel knapper (WCAG-standarden 1.3.1 Informasjon og relasjoner (Nivå A)(Åpnes i ny fane))

Bruk av ARIA​

Dersom det er vanskelig å oppfatte lenkens formål fra den programmatiske konteksten kan ARIA brukes for å formidle viktig informasjon om konteksten til skjermleserbrukere. Dette er for eksempel viktig når visuell layout eller plassering har betydning for forståelsen av konteksten. Les mer om ARIA hos W3C Developing a Keyboard Interface | APG | WAI | W3C(Åpnes i ny fane).

Størrelse på lenker​

Pass på at lenker, spesielt når det brukes ikoner, er tilstrekkelig store. Vi anbefaler å følge WCAG 2.5.5 Målstørrelse, som ligger utenfor de lovpålagte kravene i Norge. Dette suksesskriteriet sier at målstørrelsen for interaktive elementer skal være minst 44px * 44px

Lenker som åpnes i ny fane​

Ikke lag lenker som åpnes i ny fane. Dette kan brukeren velge selv.

Sammensatte lenker​

Ved bruk av lenker som er sammensatt av flere elementer, for eksempel bilde og tekst, skal lenkens formål komme frem. Det vil si at en eventuell alternativtekst til et bilde skal forklare lenken, og ikke nødvendigvis innholdet i bildet. Dersom lenkens formål er dekket av tekst i lenken kan et eventuelt bilde markeres som dekorativt. Dette er en del av en helhetsvurdering, og det er viktig å se en sammensatt lenke i kontekst (Lenker | Tilsynet for universell utforming av ikt (Åpnes i ny fane))

Eksempel:
Sammensatte lenker fra en innholdsside lenker videre til annet innhold i læremidlet. Eksempelet er hentet fra NDLA (Bærekraft og samfunnsansvar - Markedsføring og ledelse 2 - NDLA (Åpnes i ny fane))

Skjermbilde fra NDLA som viser en sammensatt lenke med bilde og tekst

Vi anbefaler å sørge for at tekst og bilde som brukes i slike lenker velges på en måte der lenkens formål dekkes av teksten og bildet tilsammen. Designerrollen kan innebære å assistere eventuelle redaktører som lager sammensatte lenker. Dersom redaktørene ikke har den tekniske kunnskapen som trengs eller det mangler tilstrekkelig funksjonalitet for redaktører i CMS-et anbefaler vi redaktørene å skrive en tekst som alene (uten bildets alt-tekst) dekker hele lenkeformålet.

Feller å unngå​

  • Unngå farge som eneste visuelle indikator for en lenke, og sørg for god kontrast for lenkefargen mot bakgrunnen.
  • Lenketekst som “Les mer” eller “her” fungerer ikke alene. Dette er uheldig for skjermleserbrukere som kan navigere direkte til lenker og ikke har oversikt over nødvendig kontekst for lenken.
  • Flere lenker med samme lenketekst som fører til forskjellige mål skal unngås.
  • Unngå å bruke <button> for navigasjon. For lenker i navigasjon skal <a> -elementet brukes.

Tips og triks​

  • Pass på at lenker skiller seg fra omkringliggende tekst. Ikke bruk farge alene til dette.
  • Bruk gjenkjennbar frasering av lenketekst, konsekvent med andre lenker i læremidlet.
  • Pass på å bruke tilstrekkelig plass, eller bruk en liste dersom lenker skal plasseres direkte etter hverandre.
  • Bruk et ikon eller tekst for å indikere at en lenke går til en ekstern side. Ved bruk av ikon skal dette ha en alternativtekst, for eksempel alt=”åpnes i ny fane”.
  • Ved bruk av bilde i et <a> -element skal dette ha alternativtekst som forklarer lenkens formål. Dette gjelder med mindre lenken også inneholder tekst som er dekkende for lenkens formål, da kan bildet ha tomt alt-attributt.
  • Hold lenketekster korte og enkle.
  • Test lenker med skjermleser for å se at de fungerer og er forståelige i konteksten. Les mer om brukertesting

Les mer om lenker​