5 enkle tips til en mer tilgjengelig nettside

En rapport fra UU-tilsynet som viser resultat av tilsyn med nettsider og apper i perioden 2015-2023, viste at hele 97% av ikt-løsningene ikke var tilstrekkelig universelt utformet. The WebAIM Million undersøker verdens topp million nettsider. Rapporten deres fra 2023 viste at 96.3% av nettsidene hadde feil som bryter med kravene i WCAG-standarden. Rapporten viser at det i stor grad er de samme feilene som går igjen.

I dette innlegget skal vi ta for oss noen av gjengangerne vi støter på når vi undersøker nettsiders tilgjengelighet. Dette er våre 5 enkle tips til en mer tilgjengelig nettside.

1. Kontrast

For at tekst skal være godt lesbar, må kontrasten mot bakgrunnen være stor nok. Dette betyr at du skal bruke mørk tekst på lys bakgrunn og omvendt. For å vite om fargene har høy nok kontrast mot hverandre, kan du måle kontrastforholdet. Det finnes flere gratis verktøy du kan bruke på nett for å gjøre dette. Vi liker å bruke WebAIM Contrast Checker, hvor du kan plotte inn fargene dine og få kalkulert kontrastforholdet.

Kontrastforhold mellom tekst og bakgrunn skal være minst 4,5:1. For stor tekst er kravet 3,0:1. Med stor tekst menes normal tekst med minimum tekststørrelse 24px eller uthevet tekst med minimum tekststørrelse 19px.

Middels stor tekst

Dette er normal tekst i størrelse 18px.

Stor tekst

Dette er normal tekst i størrelse 24px.

Dette er uthevet tekst i størrelse 19px.

2. Tekststørrelse

Det er ikke noe spesifikt krav om minimum tekststørrelse, men det er et krav at teksten skal være lesbar. Det sier seg selv at dersom teksten er for liten så blir den vanskelig å lese, men det kan være vanskelig å vite nøyaktig hvor denne grensen går. Det kan også være store variasjoner mellom ulike skrifttyper, så her kan du måtte ta individuelle vurderinger. Vår generelle anbefaling for brødtekst er tekststørrelse 16px.

Dette er skriftstørrelse 16px.

Og dette er skriftstørrelse 14px.

Dette er skriftstørrelse 12px. Nå begynner det kanskje å bli vanskelig å lese?

3. Overskrifter

Nettsider består av HTML og innen HTML har man noe som heter overskriftsnivåer. Man bruker ulike overskriftsnivåer til å strukturere tekstinnhold. Det stilles krav til at disse nivåene brukes på riktig måte. I de fleste redigeringsprogram for nett, vil du kunne velge overskriftsnivå for overskriftene sine. For at tekststrukturen skal oppfattes riktig av skjermlesere, er det viktig at du velger riktig nivå i henhold til tekststrukturen.

Overskriftsnivåer spenner fra H1 til H6, hvor H1 kommer øverst i strukturen og H2, H3, H4, H5 og H6 følger kronologisk. Hvor mange av nivåene man trenger å bruke kommer an på hvor mange nivåer teksten har. Ofte vil man ikke ha bruk for alle.

H1 skal som hovedregel benyttes til sidetittel. I et redigeringsprogram for nett vil man som regel derfor ikke ha bruk for dette nivået. Dette er fordi man gjerne har et eget felt hvor man skriver inn sidetittelen som kodes som H1 automatisk. H2 skal benyttes til overskrifter til avsnitt som kommer på neste nivå. H3 skal benyttes til overskrifter til avsnitt som kommer på nivået etter det igjen. Slik fortsetter det videre gjennom alle overskriftsnivåene. Du skal ikke hoppe over nivåer.

Mange nettsider er utformet slik at overskriftsnivåene har ulike design og ulike tekststørrelser. Det kan derfor være fristende å velge et overskriftsnivå basert på utseende og ikke på hva som er riktig nivå. Dette strider mot regelverket. Dersom du ønsker et annet utseende på overskriften, må du først velge riktig overskriftsnivå og deretter kan du manuelt justere design.

4. Alternativ tekst

Det er et krav at innhold eller motiv i bilder skal formidles riktig. Dette gjør du, for de fleste bilder, ved å legge til alternativ tekst (eller alt-tekst, som de også kalles) til bildene. En god alt-tekst beskriver konsist hva bildet formidler.

<img src="katt.jpg" alt="Katt sover under hvit dyne" />

For andre bilder er det litt ulike kriterier avhengig av bildets funksjon.

Dekorative bilder

Dersom bildet er rent dekorativt, skal bildet ha alt-attributt, men alt-teksten skal være tom. Om bildet er dekorativt eller meningsbærende vil være avhengig av konteksten. Det samme bildet kan være dekorativt i én sammenheng, men meningsbærende i en annen.

Dersom dette bildet brukes som en bakgrunn eller annet dekorativt element på nettsiden, skal alt-teksten være tom.

<img src="plant.jpg" alt="" />

Bilde som lenke

Dersom bildet er en lenke, skal alt-teksten beskrive lenkemålet.

Dersom dette bildet lenker til siden "Kundeservice", skal alt-teksten være "Kundeservice".

<a href="https://nettside.no/kundeservice"> <img src="customer-service.jpg" alt="Kundeservice" /> </a>

Ikoner

Dersom bildet er et ikon med semantisk mening, skal alt-teksten være lik den semantiske meningen til ikonet. Dersom ikonet står sammen med tekst som er lik den semantiske meningen, trengs det ingen alternativ tekst.

For et ikon som betyr "Søk", skal alt-teksten være "Søk".

<img src="sok.png" alt="Søk" />

Diagrammer

Dersom bildet er av diagrammer som presenterer informasjon, skal alt-teksten beskrive hvilket type diagram det er og kort hvilken informasjon som presenteres. Diagrammer skal i tillegg ha et fullverdig tekstlig alternativ til informasjonen som presenteres.

<img src="diagram.png" alt="Stolpediagram som viser hvor mange søsken barna i klassen har" />

5. Lenker

Når du legger inn lenker i tekst, skal leseren kunne forstå hva lenken leder til uten at de må lese resten av teksten. Lenketeksten må derfor samsvare med lenken. Dette gjør det lettere å raskt forstå hvor lenken leder oss. Det finnes flere måter å oppnå dette på, men den enkleste er å simpelthen benytte tittelen på det du lenker til i lenketeksten. Da skal lenketeksten være identisk med (enten hele eller starten av) tittelen på lenkemålet.

Lenke til vår nettside gjort riktig

Hvis du vil lese mer om design og merkevarebygging, sjekk ut Allsidig design sin nettside.

Her har vi lenket teksten "Allsidig Design" fordi lenketeksten "Allsidig Design" er tilstrekkelig for å fortelle leseren hvor lenken fører til.

Lenke til vår nettside gjort feil

Hvis du vil lese mer om design og merkevarebygging, sjekk ut Allsidig design sin nettside.

Hvis vi lenker kun teksten "nettside", forteller lenketeksten leseren av lenken navigerer til nettside. Det kan være hvilken som helst nettside. Dette formidler derfor ikke lenkemålet på en god nok måte.