Universell utforming

Om du ser på det som en universell utfordring, så tenk heller på det som universell utforming. Tar du i bruk disse små tipsene er du på god vei til å lage gode nettsider. Med økt bevissthet, og ved å tenke deg om to ganger før du trykker «publiser» har du allerede gjort halve jobben.

Illustrasjonsbilde
Illustrasjon: uu.difi.no

Hva er universell utforming

Universell utforming (UU) har som mål å bidra til at løsninger skal kunne brukes av alle, i så stor utstrekning som mulig, uten behov for spesialløsninger. Dette bidrar til et inkluderende samfunn der flest mulig kan delta uavhengig av funksjonsevne. UU er basert på prinsippet om at det kun finnes en populasjon bestående av personer som representerer ulike egenskaper og evner. Det finnes mange definisjoner på UU, men felles for dem alle er at de ønsker å ivareta hele befolkningens variasjon i funksjonsevne. Barne- ungdoms- og familiedirektoratet definerer universell utforming slik:

Med universell utforming menes: utforming av produkter, omgivelser og tjenester på en slik måte at de kan brukes av alle mennesker, i så stor utstrekning som mulig, uten behov for tilpasning og en spesiell utforming. Universell utforming skal ikke utelukke hjelpemidler for bestemte grupper av mennesker med nedsatt funksjonsevne når det er behov for det.

Lurer du fortsatt på hva universell utforming på nett egentlig er? Kort forklart så er ideen med universell utforming å lage så brukervennlige løsninger at det i liten grad skal være behov for spesialtilpasninger ved siden av.

Forskjellen på tilgjengelighet og universell utforming

Begrepet universell utforming og tilgjengelighet blir ofte brukt om hverandre, til tross for at det er en forskjell mellom disse to begrepene. Dersom en stolheis er et eksempel på en løsning som gjør en trapp tilgjengelig for en brukergruppe, så er en heis som er brukbar for personer med rullestol, foreldre med små barn, personer som har mye å bære på, eller en person som bare er litt sliten et eksempel på en løsning som er universelt utformet. Universell utforming har med andre ord fokus på hele brukergruppen, uavhengig av funksjonshemminger, mens tilgjengelig design er tilrettelagt for enkelte brukere i en brukergruppe.

Universell er ikke vanskelig

Du tenker kanskje at universell utforming er vanskelig, og vet ikke helt hva du kan gjøre for å bedre brukeropplevelsen på nett? Med kun små grep kan du gjøre opplevelsen av nettsiden din bedre for alle. 

Overskrifter

Bruk riktig nivå av overskrifter i artiklene dine, slik at alle lett kan skille mellom viktigheten på overskriftene. Unngå å bruke fet skrifttype for å strukturere innholdet ditt. Mellomoverskrifter skaper struktur i dokumentet ditt og øker lesbarheten for brukerne. På UiO har vi lagt til rette for bruk av overskrifter med nivåinndelinger. En hovedmellomoverskrift skal alltid være av typen «Overskrift 2». Bruk deretter «Overskrift 3» om du ønsker en overskrift mellom to hovedmellomoverskrifter. 

Skriv enkelt og forståelig

Tungt og uklart språk fører til budskap som går tapt. For å bidra til at brukeren oppfatter budskapet, og at kommunikasjonen går lettere har vi noen enkle råd for klarspråk:

  • Tenk over hvem du skriver for.
  • Finn ut hvilket budskap du ønsker å formidle.
  • Skriv det viktigste først.
  • Skriv direkte til brukeren.
  • Si én ting av gangen, del opp setningene der du kan.
  • Forklar fremmedord og faguttrykk.
  • Tilpass skrivestilen til målgruppen.
  • Les korrektur.

Sjekkliste for skribenter på Klarspråk.no

Alternativ tekst til bilder

Bilder skal ha en alternativ tekst (alt-tekst). Denne teksten må ikke forveksles med bildetekst. Alt-teksten sier noe om hva du ser i bildet, mens en bildetekst sier noe om konteksten til bildet. Eksempel:

Overskriften til de tre sosiale ikonene gir konteksten til og beskrivelsen til hva bildene er, men personer som ikke kan oppfatte bildene trenger en nærmere beskrivelse av hva de tre ikonene er. Et eksempel på en slik tekst kan være: «Facebook», og tilsvarende for de andre to ikonene. Den alternative teksten er konkret, og gir ingen ekstra informasjon utover det bildet faktisk viser. Om bildene kun skal brukes til pynt bør du vurdere å la alt-teksten være tom. Overflødig alt-tekst blir fort støy ved bruk av hjelpemidler som leser innholdet/skjermlesere.

Kodeeksempel:

<img src="facebook.png" alt="Facebook" />

Lenketekster

Lenketekster skal være beskrivende, og gi brukeren nok informasjon til å forstå hva målet med lenken er. Istedenfor å skrive «Les mer her» bør du for eksempel skrive «Les mer om universell utforming her». På denne måten vil lenken alene være godt nok til å forstå hva som skjuler seg bak lenken.

Tabeller og lister

Tabeller skal kun brukes for å presentere data, og ikke for å styre utseendet på nettsiden. Husk også å gi alle tabeller definerte overskriftceller for kolonner og/eller rader. Dette hjelper alle brukere med å forstå innholdet i tabellen, og den blir mer lesbar.

Når du bruker lister må du bruke riktig listetype:

  • Nummerert liste når rekkefølgen er viktig
  • Punktliste når rekkefølgen er uvensentlig

Dersom et listepunkt tilhører det foregående punktet må du huske å rykke det inn slik at det blir et underpunkt.

Farge, form og kontrast

Du bør være forsiktig med å velge egne farger på tekst og illustrasjoner. Bruk farger som er konsekvent med utformingen av nettstedet du jobber med. Ved bruk av farger stilles det krav til å overholde god kontrast mellom tekst og bakgrunn. Fargeprofilen til UiO er utarbeidet i henhold til disse kravene, og du trenger derfor ikke å tenke på dette om du holder deg innenfor profilen. Dersom du likevel ønsker å benytte andre farger og er usikker på fargekontrasten kan du benytte  verktøyet Colour Contrast Check for å måle kontrasten mellom bakgrunnen og teksten. Kravet er at teksten og bakgrunnen minimum skal oppnå en kontrast på nivå AA i henhold til WCAG 2.0-standarden.

Verktøy

Vortex (publiseringsverktøyet) har en dedikert knapp for å teste tilgjengeligheten i teksten du skriver. Med dette verktøyet kan du blant annet sjekke om du har brukt riktige overskrifter eller om tabellene er riktig bygget opp med overskrifts- og innholdsceller. 

Vær nøye med å bruke denne knappen ofte, så blir det lettere å rette opp i eventuelle feil i en tekst.

 

Referanser/støttelitteratur

Difi (2016)  Redaktørens ansvar for universell utforming.

Foss-Pedersen, R. J. (2016) Digitale eksamensløsninger i norsk universitets- og høgskolesektor: En eksplorativ studie av praksiser tilknyttet universell utforming.

Språkrådet (u.å.) Vær klar

 

Emneord: universell utforming, tilgjengelighet, brukbarhet Av Rikke Julie Foss-Pedersen
Publisert 21. mars 2017 09:06 - Sist endret 17. jan. 2018 15:07

Universell utforming

Om du ser på det som en universell utfordring, så tenk heller på det som universell utforming. Tar du i bruk disse små tipsene er du på god vei til å lage gode nettsider. Med økt bevissthet, og ved å tenke deg om to ganger før du trykker «publiser» har du allerede gjort halve jobben.

Illustrasjonsbilde
Illustrasjon: uu.difi.no

Hva er universell utforming

Universell utforming (UU) har som mål å bidra til at løsninger skal kunne brukes av alle, i så stor utstrekning som mulig, uten behov for spesialløsninger. Dette bidrar til et inkluderende samfunn der flest mulig kan delta uavhengig av funksjonsevne. UU er basert på prinsippet om at det kun finnes en populasjon bestående av personer som representerer ulike egenskaper og evner. Det finnes mange definisjoner på UU, men felles for dem alle er at de ønsker å ivareta hele befolkningens variasjon i funksjonsevne. Barne- ungdoms- og familiedirektoratet definerer universell utforming slik:

Med universell utforming menes: utforming av produkter, omgivelser og tjenester på en slik måte at de kan brukes av alle mennesker, i så stor utstrekning som mulig, uten behov for tilpasning og en spesiell utforming. Universell utforming skal ikke utelukke hjelpemidler for bestemte grupper av mennesker med nedsatt funksjonsevne når det er behov for det.

Lurer du fortsatt på hva universell utforming på nett egentlig er? Kort forklart så er ideen med universell utforming å lage så brukervennlige løsninger at det i liten grad skal være behov for spesialtilpasninger ved siden av.

Forskjellen på tilgjengelighet og universell utforming

Begrepet universell utforming og tilgjengelighet blir ofte brukt om hverandre, til tross for at det er en forskjell mellom disse to begrepene. Dersom en stolheis er et eksempel på en løsning som gjør en trapp tilgjengelig for en brukergruppe, så er en heis som er brukbar for personer med rullestol, foreldre med små barn, personer som har mye å bære på, eller en person som bare er litt sliten et eksempel på en løsning som er universelt utformet. Universell utforming har med andre ord fokus på hele brukergruppen, uavhengig av funksjonshemminger, mens tilgjengelig design er tilrettelagt for enkelte brukere i en brukergruppe.

Universell er ikke vanskelig

Du tenker kanskje at universell utforming er vanskelig, og vet ikke helt hva du kan gjøre for å bedre brukeropplevelsen på nett? Med kun små grep kan du gjøre opplevelsen av nettsiden din bedre for alle. 

Overskrifter

Bruk riktig nivå av overskrifter i artiklene dine, slik at alle lett kan skille mellom viktigheten på overskriftene. Unngå å bruke fet skrifttype for å strukturere innholdet ditt. Mellomoverskrifter skaper struktur i dokumentet ditt og øker lesbarheten for brukerne. På UiO har vi lagt til rette for bruk av overskrifter med nivåinndelinger. En hovedmellomoverskrift skal alltid være av typen «Overskrift 2». Bruk deretter «Overskrift 3» om du ønsker en overskrift mellom to hovedmellomoverskrifter. 

Skriv enkelt og forståelig

Tungt og uklart språk fører til budskap som går tapt. For å bidra til at brukeren oppfatter budskapet, og at kommunikasjonen går lettere har vi noen enkle råd for klarspråk:

  • Tenk over hvem du skriver for.
  • Finn ut hvilket budskap du ønsker å formidle.
  • Skriv det viktigste først.
  • Skriv direkte til brukeren.
  • Si én ting av gangen, del opp setningene der du kan.
  • Forklar fremmedord og faguttrykk.
  • Tilpass skrivestilen til målgruppen.
  • Les korrektur.

Sjekkliste for skribenter på Klarspråk.no

Alternativ tekst til bilder

Bilder skal ha en alternativ tekst (alt-tekst). Denne teksten må ikke forveksles med bildetekst. Alt-teksten sier noe om hva du ser i bildet, mens en bildetekst sier noe om konteksten til bildet. Eksempel:

Overskriften til de tre sosiale ikonene gir konteksten til og beskrivelsen til hva bildene er, men personer som ikke kan oppfatte bildene trenger en nærmere beskrivelse av hva de tre ikonene er. Et eksempel på en slik tekst kan være: «Facebook», og tilsvarende for de andre to ikonene. Den alternative teksten er konkret, og gir ingen ekstra informasjon utover det bildet faktisk viser. Om bildene kun skal brukes til pynt bør du vurdere å la alt-teksten være tom. Overflødig alt-tekst blir fort støy ved bruk av hjelpemidler som leser innholdet/skjermlesere.

Kodeeksempel:

<img src="facebook.png" alt="Facebook" />

Lenketekster

Lenketekster skal være beskrivende, og gi brukeren nok informasjon til å forstå hva målet med lenken er. Istedenfor å skrive «Les mer her» bør du for eksempel skrive «Les mer om universell utforming her». På denne måten vil lenken alene være godt nok til å forstå hva som skjuler seg bak lenken.

Tabeller og lister

Tabeller skal kun brukes for å presentere data, og ikke for å styre utseendet på nettsiden. Husk også å gi alle tabeller definerte overskriftceller for kolonner og/eller rader. Dette hjelper alle brukere med å forstå innholdet i tabellen, og den blir mer lesbar.

Når du bruker lister må du bruke riktig listetype:

  • Nummerert liste når rekkefølgen er viktig
  • Punktliste når rekkefølgen er uvensentlig

Dersom et listepunkt tilhører det foregående punktet må du huske å rykke det inn slik at det blir et underpunkt.

Farge, form og kontrast

Du bør være forsiktig med å velge egne farger på tekst og illustrasjoner. Bruk farger som er konsekvent med utformingen av nettstedet du jobber med. Ved bruk av farger stilles det krav til å overholde god kontrast mellom tekst og bakgrunn. Fargeprofilen til UiO er utarbeidet i henhold til disse kravene, og du trenger derfor ikke å tenke på dette om du holder deg innenfor profilen. Dersom du likevel ønsker å benytte andre farger og er usikker på fargekontrasten kan du benytte  verktøyet Colour Contrast Check for å måle kontrasten mellom bakgrunnen og teksten. Kravet er at teksten og bakgrunnen minimum skal oppnå en kontrast på nivå AA i henhold til WCAG 2.0-standarden.

Verktøy

Vortex (publiseringsverktøyet) har en dedikert knapp for å teste tilgjengeligheten i teksten du skriver. Med dette verktøyet kan du blant annet sjekke om du har brukt riktige overskrifter eller om tabellene er riktig bygget opp med overskrifts- og innholdsceller. 

Vær nøye med å bruke denne knappen ofte, så blir det lettere å rette opp i eventuelle feil i en tekst.

 

Referanser/støttelitteratur

Difi (2016)  Redaktørens ansvar for universell utforming.

Foss-Pedersen, R. J. (2016) Digitale eksamensløsninger i norsk universitets- og høgskolesektor: En eksplorativ studie av praksiser tilknyttet universell utforming.

Språkrådet (u.å.) Vær klar

 

Emneord: universell utforming, tilgjengelighet, brukbarhet Av Rikke Julie Foss-Pedersen
Publisert 21. mars 2017 09:06 - Sist endret 17. jan. 2018 15:07
Tegneblokk med håndtegning av et brukergrensesnitt

UX-bloggen

En blogg for deg som er interessert i gode brukeropplevelser, tips og triks, nyttige UX-verktøy og erfaringer fra prosjekter vi i Gruppe for Brukeropplevelse arbeider med.