Universell utforming 101: Designer du for alle dine brukere?

Universell utforming gagner både brukere, bedrifter og folk flest. Men hva er det, og hvilke konkrete tiltak bør du som designer, utvikler eller prosjektleder ta hensyn til?

Visste du at det finnes lover for hvordan nettsiden din skal være? Nettsider og digitale plattformer skal følge kravene om universell utforming i henhold til norske lover og forskrifter. Dette kan være avskrekkende, og universell utforming kan oppleves som et omfattende og komplisert felt å sette seg inn i. Det å være bevisst er dog nødvendig i den digitale alderen vi lever i. Frykt ikke, her er introduksjonen du trenger!

Hva er universell utforming?

Universell utforming handler om å skape produkter, tjenester og innhold på nett med idéen om at de skal inkludere alle, uavhengig av funksjonsevne.

På denne måten kan alle delta og ha den samme tilgangen til samfunnet, og i dette tilfellet, digitalt innhold. Denne typen metodikk i det digitale rom kalles også inkluderende design.

Når vi snakker om digital universell utforming, kommer vi ikke unna WCAG. WCAG står for Web Content Accessibility Guidelines og er anbefalinger og retningslinjer for å gjøre innhold på nett mer tilgjengelig.

Norske forskrifter krever at nettløsninger skal utformes i samsvar med forskjellige versjoner og nivåer av WCAG.

Hvorfor er universell utforming viktig?

Det er det utallige grunner til, nesten uansett innfallsvinkel. Den mest åpenlyse, men også viktigste utenom at det er lovfestet, er at det er bra for mennesker i den digitale sfæren.

Alle vil kunne bruke og navigere produkter og tjenester på lik linje, dersom universell utforming blir satt som prioritet. I følge Bufdir har mellom 15% og 18% har nedsatt funksjonsevne. Det er mange brukere man potensielt ekskluderer og går glipp av!

Ved å legge til rette for at nettsiden er universelt utformet og brukervennlig, kan dette også resultere i at flere brukere blir lengre på siden og velger å komme tilbake. Hvis vi ikke oppfyller visse krav brukerne har, så har brukerne i de fleste tilfeller alltid mulighet til å gå et annet sted.

Her gjelder prinsippet om at brukerne bruker mest tid på sider og produkter som ikke er dine. Dette prinsippet heter Jakob’s Law og er en av UX-lovene. Dette betyr i praksis at brukerne ønsker at siden din skal fungere som sidene de allerede kjenner til.

Hvem er det godt for?

Universell utforming gagner alle! Som tilsynet for universell utforming av IKT sier: «Nødvendig for noen, men bra for alle».

Se for deg en kollektivtransport-app hvor man skal kunne kjøpe billett. Hvis kjøpsknappen er gjort for liten, så vil en med Parkinsons som har utfordringer med motorikk, så vel som en som løper til bussen og skjelver litt, ha trøbbel med å trykke på knappen og gjennomføre kjøpet av billetten.

Husk at ikke alle mennesker bruker ditt produkt eller tjeneste i perfekte, uforstyrrede omgivelser. Da gjelder det å ha bygd en god og solid grunnmur i tråd med universell utforming.

Godt for SEO

Det som er bra for universell utforming kan bidra til bedre SEO. Du rangerer ikke nødvendigvis høyere ved å passere accessibility-sjekkere, men mye av det som er bra for universell utforming er også godt for å rangere høyere.

Søkemotorer belønner nettsteder med god utforming, og universell utforming er et kriterie for kvalitet.

Faktorer som god brukervennlighet, mulighet for å bruke skjermleser, sidestruktur og funksjonalitet er kriterier for både universell utforming og SEO. Dette er et godt kort å ha i ermet når man snakker med enten beslutningstakere eller “skeptikere”.

Mange typer funksjonsnedsettelser

En viktig ting å huske er at det finnes mange typer funksjonsnedsettelser, og at universelt utformede løsninger vil være nyttig for alle på ett eller annet punkt i livet.

Funksjonsnedsettelser er ikke nødvendigvis kun permanente. La oss ta syn som et eksempel. I mange tilfeller kan det være vanskelig å se det som står på en skjerm på grunn av omgivelser eller omstendigheter - dette kan være sterkt sollys, avstand eller egen synsevne. Da er det viktig at utformingen er optimal.

Under følger noen eksempler på forskjellige typer funksjonsnedsettelser.

Permanent: Blindhet, svaksynthet, alderslangsynthet

Midlertidig: Mistet brillene, grønn og grå stær

Situasjonsbestemt: Dårlig lys, ekstremt lyst, distraksjoner, avstand

De 7 prinsippene for universell utforming

The Center for Universal Design ved North Carolina State University utviklet i 1997 syv prinsipper for å evaluere og lage universelt utformede løsninger. De er like relevante i dag som for 25 år siden. De er dog ikke direkte knyttet til loven, og bør kun brukes til veiledning.

Hva skal jeg som designer, utvikler eller prosjektleder sørge for i en nettløsning?

Punktene som følger er langt fra uttømmende, men dette er kanskje noe av det største og viktigste å få implementert.

1. Tilrettelegg for tastaturnavigasjon
Når man bruker tastaturnavigasjon bruker man tab-tasten for å navigere seg rundt.

Tilrettelegging av tastaurnavigasjon tilgjengeliggjør nettløsningen din for brukerne som ikke kan eller ønsker å bruke mus til å navigere seg rundt.

Gjør det lettere for brukeren å navigere seg med tastatur ved å sette en tab-rekkefølge som gir mening. Bruk også gjerne “Skip navigation links”, eller hopplenker, for å la brukeren hoppe rett til hovedinnholdet på en side.

Her er en god guide til tastaturnavigasjon av UU-tilsynet.

2. Semantikk og korrekte tittelhierarkier
Det er viktig å benytte ryddig semantisk kode, med korrekte tittelhierarkier.

Sørg blant annet for at overskrifter skal følge riktig rekkefølge fra H1 til H6, og at titletaggen i toppen av fanen representerer innholdet på siden.

3. Skriv alt-tekster
Når skjermlesere forteller om hva som skjer på et bilde på en nettside, vil den lese fra alt-teksten som er kodet inn.

Når dette ikke finnes, kan sammenhengen mellom innhold på nettsiden din miste kontekst for de som bruker skjermleser.

Alt-tekst bør beskrive bildets motiv. Dekorative bilder skal markeres med en tom alt-atributt, for å unngå støy for sluttbrukeren.

4. Kontraster, kontraster, kontraster
Dette er den vanligste feilen å begå i følge WebAim, men noe av det som er lettest å gjøre noe med i mange tilfeller.

Sett deg inn i hvilke verdier som kreves for forskjellig type tekst og innhold, eller bruk en kontrastsjekker som gjør det for deg.

5. Store nok “touch targets”
Med touch targets menes klikkoverflater, og her gjelder krav for blant annet inputfelt og knapper. Disse skal være minst 44x44px (WCAG 2.1).

Dette er viktig for å unngå at brukeren trykker feil, enten om de har problemer med finmotorikk, rett og slett bare har store fingre, eller er på farten. Husker du det jeg skrev om de to forskjellige personene som skal kjøpe bussbillett?

6. Korrekt utformede skjemaer og inputfelt
I skjemaer er det blant annet viktig at labels, eller etiketter på godt norsk, går utenfor inputfelt.

Dersom instruksjoner eller etiketter plasseres inne i inputfeltet, kan det hindre brukeren fra å se over om informasjonen er korrekt. WCAG krever også at obligatoriske felter markeres.

7. Bruk form, tekst, kontrast, størrelse og uthevelse for å tydeliggjøre det du prøver å formidle
Visste du at mellom 5% og 8% av alle menn er fargeblinde og sliter med å skille mellom farger i varierende grad? Med flere virkemidler enn bare farger, kan du sørge for at flere finner fram til målet sitt raskere.

Et konkret eksempel er å dekorere hyperlenker med både farge og understrek. En som har vanskelighet for å se farge kan ikke nødvendigvis se forskjellen mellom mørk blå lenkefarge og svart brødtekst.

Å supplere lenker med en understrek er et mønster som de fleste internettvante kjenner til.

8. Tillat nok zoom
Tilrettelegg nettsiden din slik at den er mulig å bruke på høye zoom-prosenter.

Mange navigerer nettet på måter du kanskje aldri har tenkt på før, blant annet ved maksimal zoom.

9. Skriftstørrelse og lesbare skrifter
Nå har ikke WCAG et krav om en viss skriftstørrelse, men det er generell konsensus og best practice at 16px er et godt startpunkt for avsnitt.

Selv om disse ennå ikke er offisielle WCAG-krav, er det likevel noen UI-best practice-prinsipper som bør ligge til grunn.

Bruk blant annet skrifter som har god lesbarhet. Vurder altså nøye om du skal bruke den skriften som har høy grad av kompleksitet til brødteksten.

Prøv også å unngå for mange skriftfamilier på én løsning, og dropp “light” og “thin”-variantene dersom det er tvil om det er leselig for alle. Bruk skjønn, men gjennomfør også tester!

10. Nok tekstavstand og korte linjelengder
Sørg for at tekstinnholdet ditt er så lesbart og tilgjengelig så mulig ved å bruke passende linjehøyde. For å møte WCAG-krav bør det være minst 1.5 linjeavstand på avsnitt.

For å godkjennes som tilgjengelig i følge WCAG bør også linjelengder være mindre enn 80 tegn per linje, for optimal lesbarhet.

11. Universelt utformet tekst
Ikke bare bør vi utforme tekstdekorasjon universelt, men pass på at innhold er skrevet forståelig og med enkelt språk.

12. God interaksjonsdesign
Tydelig og korrekt feedback/tilbakemelding ved interaksjon, tydelighet om hvilke knapper og lenker som leder hvor, og god navigasjon er viktig for brukervennlighet i enhver nettløsning.

13. Tydelige feilmeldinger
Skriv feilmeldinger som tydelig beskriver feilen som har oppstått. Har brukeren skrevet inn eposten sin i feil format, er det viktig at det ikke kun står “feil” eller “error”. Da vil ikke brukeren ha kunnskap nok om feilen til å kunne rette den opp raskest mulig.

Her er det en enorm fordel at meldingen dukker opp i nærheten av der feilen har skjedd, (tenk Law of Proximity) slik at brukeren forstår nøyaktig hvor feilen har oppstått og kan korrigere raskere.

14. Test, test, test!
Test på et mangfoldig utvalg mennesker, med forskjellig grad av funksjonsevne. Test også på forskjellige aldere, med varierende grad av teknologisk kunnskap.

Design for alle

Med dette i tankene, bør man huske at universell utforming samsvarer med brukervennlighet og kvalitet. Ikke bare er det viktig for mennesker med det største behovet, men det gjør innholdet du skaper mer mottakelig for folk flest.