Universell utforming: Oppfyll kravene og gjør nettsiden din tilgjengelig for folk OG søkemotorer

Årlig har SSB en undersøkelse om arbeidsmarkedet i Norge, der en del handler om funksjonshemming. 636.000 personer under 66 år svarte i 2020 “ja” på spørsmålet “Har du etter din mening en funksjonshemming?” (Kilde: bufdir.no) Flest har utfordringer med synet, selv ved bruk av briller eller linser. Du kjenner kanskje på det selv? At du må myse og konsentrere deg for å se hva som står?

En stor del av målgruppen din vil få en bedre brukeropplevelse på nettsiden dersom du sørger for å oppfylle noen relativt enkle krav.

Trenger du et argument til?

En nettside som er universelt utformet vil som regel få mange flere besøkende. Søkemotorer belager seg nemlig på mange av de samme kravene når de vurderer hvilke nettsider som skal få trone på toppen i det organiske søkeresultatet.

Det er med andre ord lurt å oppfylle kravene utover at det er pålagt!

The World Wide Web Consortium har i samarbeid med organisasjoner verden over utformet en felles standard som ligger til grunn også i vurderingen av norske nettsider. Kriteriene finner du i sin helhet i dette dokumentet Standarden for Universell Utforming og Retningslinjer for tilgjengelig webinnhold (WCAG).

I Norge er hovedregelen at nettløsninger skal være universelt utformet. Dette gjelder alle aktører, både private og offentlige virksomheter, samt lag og organisasjoner. Stortinget har nedfelt en forskrift som krever at nettløsninger må oppfylle minst 35 av 61 kriterier i WCAG 2.0-standarden.

Fra 1. januar 2023 må offentlig sektor oppfylle 49 av 78 suksesskriterier i den oppdaterte WCAG 2.1-standarden.

I Norge er det Tilsynet for universell utforming av IKT som har ansvaret for å følge opp denne forskriften og gir god veiledning og løsningsforslag på sine nettsider. I Forskrift om universell utforming av IKT-løsninger finner du minimumskravene som er omfattet av forskriften.

WebAim sin plugin WAVE for Google Chrome, Mozilla Firefox og Microsoft Edge er et fint verktøy for å sjekke hvordan Universell Utforming-statusen er på din nettside. Dette verktøyet finner du også som nettversjon ved å gå inn på WebAim sine hjemmesider.

Andre programmer som hjelper deg å utforme gode nettsider:

• Siteimprove Accessibility Checker
• AChecker
• Web Accessibility
• WebAim
• Google Lighthouse

De ulike kriteriene fordeler seg seg på fire kategorier:

1. Design
2. Innhold
3. Front end
4. Back end

Under finner du en forklaring på de ulike kategoriene, samt noen eksempler på hva det innebærer.

Krav knyttet til utseende på nettstedet handler om alt fra kontrast til fontstørrelser. Rett og slett egenskaper som gjør det enklere for svaksynte å kunne lese og skille mellom elementer på nettstedet.

Her er det altså viktig å sørge for tilstrekkelig kontrast mellom tekst og bakgrunn samt å bruke lettleste fonter for web (for eksempel Tahoma, Calibri, Helvetica, Arial, Verdana eller Times New Roman).

Andre grep kan være å gi valg for skriftstørrelse og høykontrast.

Kravene knyttet til innhold handler blant annet om at titler skal være nyttige og tydelige, lenketekstene skal tydeliggjøre lenkens mål og funksjon.

Andre punkter kan gå på det å gi brukeren alternativer for innhold som ikke er tekst. Skriv for eksempel bildetekst som forklarer grafiske elementer og gi alternativer når innholdet blir presentert som video eller lyd. Dette kan være teksting av video eller transkripsjon av for eksempel et foredrag.

Front end handler mye om de egenskapene som forbedrer flyten på nettsiden, som for eksempel det å presentere innholdet i en logisk rekkefølge som gir mening for brukeren.

Gi brukeren mulighet til å stoppe en film eller skru av en lyd på media som starter automatisk. Sørg for god navigasjonsflyt ved for eksempel å gi brukeren mulighet til å hoppe direkte til kjerneinnhold, og gi informasjon om navigasjonsmuligheter.

All funksjonalitet skal kunne brukes kun ved hjelp av tastatur. Språket for alle sidene bør også angis i kildekoden.

Denne kategorien handler om nettsidens kode. Alle sider bør være uten store kodefeil og alle komponenter bør ha spesifikke navn og roller i koden.

Dette kan for eksempel være at alle titler, punktlister osv. er riktig formatert, tydelig merking av skjemaer og riktige tags på navigeringspunkter. Dette er avgjørende for at navigasjon med tastatur eller andre tekniske hjelpemidler skal flyte godt.

Søkemotoroptimalisering og Universell Utforming går, som vi har vært inne på, hånd i hånd. Her er tre av kravene som du enkelt kan optimalisere selv - og som både påvirker nettsidens tilgjengelighet for folk og søkemotorer.

Sidetittel, overskrifter, underoverskrifter og brødtekst bør være beskrivende for tematikken i innholdet. Hvert tema i en artikkel eller lengre tekst bør være delt opp med beskrivende underoverskrifter.

Visste du at sidetittelen er det viktigste enkeltelementet å optimalisere på en nettside for å øke synligheten i Google? Les hvordan du lager gode sidetitler her.

I tillegg til ordvalg i overskrifter og oppdeling av teksten i nyttige bolker, er det veldig viktig at overskriftene kodes riktig. Du skal bruke ulike HTML-tags for ulike overskrifter og hvilke du bruker baserer seg på hvor i strukturen overskriften er.

Selve sidetittelen skal alltid være <h1> og denne skal det bare være én av per side. Det er fordi dette er den viktigste tittelen og skal være overhengende for temaet på den aktuelle siden.

Deretter beveger vi oss nedover i hierarkiet med overskrifter <h2> og deretter underoverskrifter som går fra <h3> helt ned til <h6>.

Det er viktig at lenketekster er så forklarende som mulig for innholdet brukeren skal klikke seg inn på. Mange kjenner sikkert igjen lenker som kun leser: “Les mer”, Klikk her” eller bare “Her”.

Et godt eksempel på en lenketekst som ikke forteller brukeren noe som helst er denne:

“Her kan du lese mer om universell utforming”.

Selv om informasjonen rundt lenken er beskrivende bør du unngå slike generiske lenketekster ettersom både søkemotorer og tekniske hjelpemidler for synshemmede får lest opp lenketekstene når de ønsker å navigere videre. Å få lest opp kun “her”, er veldig lite hjelpende.

En bedre lenketekst vil være: “Her kan du lese mer om universell utforming av nettsider”

Søkemotorer drar nytte av lenketekster ved at det gir en klar indikasjon om tematikken og søkeordet den lenkede siden handler om.

Alternativ tekst (alt-tags) på bilder, symboler og andre visuelt grafisk elementer er viktig å legge inn ettersom skjermlesere leser opp denne informasjonen til brukere av nettsiden.

Denne teksten bør holdes relativt kort, men forklare hva som befinner seg på bildet/illustrasjonen.

Les også: Slik lager du en god alternativ bildetekst

Dette er også et viktig punkt mtp. SEO. Siden søkemotorer ikke kan “se” innholdet i bilder, grafikk og illustrasjoner bruker de denne informasjonen som utgangspunkt i bildesøket. Dette gjør at bilder på nettstedet ditt kan dukke opp i relevante bildesøk, noe som igjen kan bidra til mer gratis trafikk.

On-page optimalisering av nettsider og Universell utforming har svært mange likheter.

Ønsker du å lære mer? Her får du tips til de viktigste grepene du kan ta for å optimalisere innholdet ditt på nettsiden steg for steg.

Alle disse tre kravene skal det være enkle å sjekke på nettsiden din, og lett for deg å fikse i de fleste publiseringsløsninger. Hvis du er usikker på hvordan, vil nettsideleverandøren kunne hjelpe deg.

Ønsker du hjelp til å kartlegge og utbedre forbedringspunkter for universell utforming og SEO? Ta kontakt med oss i dag.