Skip to main content

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.

Utviklerrollen​

Som utvikler er det ditt ansvar å sørge for at lenker er kodet på rett måte og at redaktører har tilgang til verktøy som lar dem produsere lenker på rett måte. I navigasjon og overordnet struktur i læremidlet tas designbeslutninger for lenkers utseende og funksjon, mens i innholdsarbeidet er det redaktører og innholdsprodusenter som lager lenker. Hvor mye frihet redaktører får i utformingen av lenker er en vurdering som gjøres for hvert læremiddel. Det er viktig å vurdere hvilke muligheter redaktørene har, slik at også lenker i innhold får konsekvent og riktig utforming.

Bestepraksis​

Anchor-element​

Som hovedregel skal <a> (anchor) -elementer brukes til lenker. <Button> kan brukes når elementet ikke er ment som et navigasjonselement, men har en bestemt funksjon som ikke i hovedsak er knyttet til navigasjon.

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.

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. Aria skal ikke brukes når det ikke er nødvendig. 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

Implementer en skip-link i henhold til WCAG 2.4.1

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. Det skal være mulig å sette alternativtekst på bilder i sammensatte lenker. (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. Utviklerrollen 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. Med skjermleser er det også mulig å navigere i en samling av alle lenker på en side. Da er det spesielt viktig at lenketekstene i seg selv er forklarende.
  • 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.
  • Ikke la elementer som ikke er lenker, for eksempel ordforklaringer, se ut som lenker. Det er anbefalt med heltrukken understreking for lenker, og stiplet for ordforklaringer.
  • Unngå å bruke full URL ved lenking til sider på samme nettsted. Dette kan være forvirrende for skjermleserbrukere.

Tips og triks​

  • Pass på at lenker skiller seg fra omkringliggende tekst. Ikke bruk farge alene til dette.
  • 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.
  • Test lenker med skjermleser for å se at de fungerer og er forståelige i konteksten. Les mer om brukertesting

Les mer om lenker​