Tekst og struktur

God tekststruktur er viktig for lesbarheten og for navigering i innhold på artikkelnivå. For best mulig effekt, både for lesbarhet og tekstens troverdighet, bør tekstens struktur og utseende være konsekvent gjennom hele nettstedet.

Introduksjon

Tekststruktur omfatter bruk av overskrifter, ingress, avsnitt og lister. Dette inkluderer blant annet riktig kode og at det er tydelig forskjell mellom overskrifter av ulike nivå, og at brødtekst skiller seg tydelig fra alle overskrifter. Den beste måten å oppnå dette på er at det finnes en godt utformet mal som alle redaktører holder seg til, og ikke lager eget utseende på teksten

Løsninger som møter kravene i forskriften

Det er en rekke krav til tekststruktur for å tilfredsstille loven. Avhengig av hvilket publiseringssystem som benyttes, kan kravene løses ulikt teknisk, men grunnprinsippene vil være de samme. Innholdet må struktureres med korrekt kode, og må kunne forstørres uten tap av tekst eller lesbarhet.

Overskrifter

Overskrifter og rett bruk av overskriftsnivåer er kanskje det mest fremtredende virkemiddelet for å gi struktur og oversiktlighet til teksten. Mange brukere, både med og uten hjelpemiddel, benytter mellomtitler for å skumlese innholdet og finne det som virker mest interessant. Uten mellomtitler blir lange tekster tunge å lese.

Overskrifter kodes ved hjelp av overskriftelementene <h1> til <h6>, og disse deler opp teksten tilsvarende i kapitler og delkapitler i ulike nivåer.

Sidetittel skal være h1

Hovedinnholdets tittel skal være den første overskriften i koden, og skal være på nivå 1 ved hjelp av elementet <h1>. Dette gjelder også startsiden, som bør ha en synlig overskrift som tydelig formidler hvilken virksomhet brukeren har kommet til. Dette er gunstig både for søkemotoroptimalisering og for brukere med hjelpemiddel.

Tittelen på siden skal være sidens første overskrift, og kodes med <h1>.
 
 

Navigering, søk, globale funksjoner og lignende som ligger i toppen av nettsiden skal derfor ikke utstyres med overskrifter, uavhengig av valgt kodestandard. Bruk heller WAI-ARIA roles og eventuelt HTML5-elementer og -attributter for å formidle nødvendig informasjon til brukere med hjelpemiddel.

Noen kodeeksempler på WAI-ARIA og HTML5:

WAI-ARIA i HTML4 og XHTML:
<div role=“navigation“>...[hovedmenyen]...</div>

WAI-ARIA og HTML5:
<nav role=“navigation“>...[hovedmenyen]...</nav>

Søkefelt i HTML5:
<input type=“search“ title=“Søk“ id=“search“ name=“search“>

Overskriftsnivåer

Overskriftsnivåer brukes for å strukturere teksten, og er særlig aktuelt i redaksjonelt innhold.

Rekkefølgen på nivåene skal være korrekt. Nedover i nivå går du ett steg om gangen, oppover avhenger det av hvordan teksten skal bygges opp. <h1>-<h2> og <h1>-<h1> er tillatt, <h1>-<h3> er ikke tillatt. Dette kan du sjekke i eksisterende tekster med Web Accessibility Toolbar, under Structure.

Kodeeksempel for overskrifter:

<h1>Tekst og struktur</h1>
<p>God tekststruktur...</p>
<h2>Løsninger som møter kravene i forskriften</h2>
<p>Det er en rekke krav...</p>
<h3>Overskrifter</h3>
<p>Overskrifter og rett bruk...</p>

Ofte er det informasjon i rammeverket som ikke er direkte knyttet til hovedinnholdet på siden, og som ligger etter hovedinnholdet i koden. Et vanlig eksempel er sidefoten, også kalt kolofonen, som gjerne inneholder overordnet kontaktinformasjon. I så fall er det gunstig å innlede denne informasjonen med <h1> for å bryte tydelig med hovedinnholdet. Det kan også være aktuelt å ha mellomtitler i denne informasjonen, og nivåene må selvfølgelig være i riktig rekkefølge.

Brødtekst

Brødtekst, eller løpende tekst, skal kodes med avsnittselemenet <p>. Dette gjør at det er enkelt å hoppe fra avsnitt til avsnitt. Enkelte publiseringssystem genererer avsnitt ved hjelp av elementet <div>, men dette er ikke optimalt. Unngå også elementene <span>, <br> og <hr> for å skape avsnitt. Unngå også tomme avsnittselement. Hvis du bruker det for å skape luft skal du løse dette med CSS i stedet.

CSS-kode for å skape avstand:

p {
padding-top: 2px;
padding-bottom: 8px;
}

Lister

Lister kan benyttes for å ramse opp informasjon. Fordelen med lister er at informasjonen blir strukturert både visuelt og i koden, og dermed blir informasjonen lettere å lese og forstå for alle brukere. Det kan være snakk om unummererte lister, nummererte lister, definisjonslister og/eller lister i flere nivå, og behovet vil ofte være forskjellig avhengig av informasjonen som skal presenteres.

En vanlig brukerfeil er at tekst blir limt inn fra annen kilde, hvor listen kanskje har visuelle listepunkt, men ikke er kodet som liste.

Kodeeksempel på korrekt kodet liste:

<ul>
  <li>Overskrifter strukturerer teksten</li>
  <li>Ingressen skal friste til lesing, og gir en kort beskrivelse av innholdet</li>
  <li>Brødteksten formidler detaljene</li>
</ul>

Korrekt koding gir fast innrykk på teksten, og ingen mellomrom mellom <li> og tekst gir best oppførsel med skjermleser.
 
 

Anbefalinger utover kravene i forskriften

Typografi

De ulike teksttypene bør være lett å skille fra hverandre. For eksempel bør det være en god sammenheng mellom overskriftsnivå og de ulike nivåenes tekststørrelse.

Eksempeltypografi for tre overskriftsnivå, ingress og brødtekst. De ulike teksttypene bør være lett å skille fra hverandre. Det bør være en god sammenheng mellom overskriftsnivå og de ulike nivåenes tekststørrelse. Klikk for større bilde.
 
 

Ingress

Ingressen er den første teksten etter overskriften. Ingressen bør være et kort sammendrag av teksten og beskrive tekstens hovedinformasjon. Ingressen skal bekrefte for leseren at det er den riktige teksten, og bør skille seg utseendemessig fra annen løpende tekst.

Brødtekst

For best mulig lesbarhet for alle brukere, bør det ikke være mer enn 65-70 tegn per linje inkludert mellomrom. Da blir teksten mer innbydende og mindre overveldende, og er særlig viktig for blant annet brukere med lesevansker eller konsentrasjonsvansker.

Lister

En vanlig kodefeil er at det ligger linjeskift i koden mellom selve <li>-elementet og teksten for det aktuelle listepunktet. Dette vil gjøre opplesningen i skjermlesere oppstykket, mer tidkrevende og vanskeligere å henge med på.

Kodeeksempel på korrekt kodet liste:

<ul>
  <li>Overskrifter</li>
  <li>Ingress</li>
  <li>Brødtekst</li>
</ul>

Skrifttyper

Moderne nettlesere og skjermer er lagt til rette for såkalt kantutjevning, slik at alle skrifttyper kan presenteres like bra på skjerm som på papir. Det er derfor noe utdatert å fraråde bruk av serif-fonter på skjerm.

En mer generell anbefaling er å bruke utbredte fonter og skrifttyper som er tilpasset for bruk på nettsider. Ikke vær for kreativ, og velg fonter som presenteres likt på alle enheter.

Ulike brukere har ulike preferanser på hvilke skrifttyper som har høyest lesbarhet. Derfor bør nettstedet være kodet slik at brukeren kan endre visningen etter sine preferanser direkte i nettleseren eller operativsystemets preferanser.

Egendefinering av skriftstil i Internet Explorer. Nettstedet bør være kodet slik at brukeren kan endre visningen etter sine preferanser. Klikk for større bilde.
 
 
Publisert: 02. jul 2015, Sist endret: 28. mar 2017

Deldette

Fant du det du lette etter?

Stjerne(*) er obligatoriske felter som du må fylle ut for å sende skjemaet. 

MERK: Du får ikke svar på denne meldingen. Har du spørsmål du ønsker svar på send oss en e-post til uu@difi.no.

Fant du det du lette etter?
*