Gjesteblogg: 12 ting du som designer kan gjøre for å sikre tilgjengelighet

Universell utforming handler ikke om å lage egne løsninger for «noen få», men om å senke kravene løsningene våre stiller til mennesker. Da kan flere bruke dem, uavhengig av funksjonsevne, situasjon, teknologi eller erfaring.

Når vi snakker om universell utforming, tenker vi ofte på WCAG-krav, lovverk, tester og tekniske detaljer. Alt dette er viktig. Men for designere starter arbeidet ofte et annet sted: i prioriteringene vi gjør, i skissene vi lager, i komponentene vi velger, og i spørsmålene vi stiller tidlig i prosessen.

Universell utforming reduserer funksjonsgapet. Brukere kan noen ganger øke egne forutsetninger ved å bruke hjelpemidler, men vi som lager digitale løsninger har et stort ansvar for å senke kravene løsningen stiller. Det ansvaret ligger ikke bare hos utviklere, testere eller fagpersoner på tilgjengelighet. Designere har også en nøkkelrolle. Her er 12 konkrete ting designere kan gjøre allerede i dag.

1. Gjør noe med det som har størst konsekvens

Ikke alle tilgjengelighetsfeil er like alvorlige. Derfor bør vi prioritere ut fra konsekvens. Hvor hardt rammer feilen brukeren? Hvor mange blir påvirket? Hvor ofte oppstår feilen? Hvor enkelt er det å rette den?

Noen feil kan få svært alvorlige konsekvenser. Blinkende innhold er et godt eksempel. Innhold skal ikke blinke mer enn tre ganger per sekund, blant annet fordi det kan fremprovosere epileptiske anfall. Det enkleste og tryggeste rådet er ofte å unngå blinkende innhold helt.

Som designer kan du bidra ved å stille spørsmålet tidlig: Hva er det verste som kan skje hvis denne løsningen ikke fungerer for en bruker? Start deretter med å løse utfordringene som har størst konsekvens!

2. Last ned Accessibility Insights for Web

Accessibility Insights for Web er et gratis verktøy fra Microsoft som gjør det enklere å teste tilgjengelighet direkte i nettleseren. Verktøyet kan blant annet hjelpe deg med å sjekke overskrifter, landemerker, fargebruk, tab-rekkefølge og automatiske tilgjengelighetsfeil.

Automatiserte tester finner ikke alt, men de er et godt sted å starte. De kan avdekke mange feil tidlig, og de gjør det enklere å diskutere konkrete funn med utviklere og innholdsprodusenter.

Overskrifter er et godt eksempel. Over 70 % av skjermleserbrukere orienterer i innhold ved å navigere mellom overskrifter. Hvis overskriftsnivåene hopper, for eksempel fra H1 til H4, eller hvis visuelle overskrifter ikke er kodet som overskrifter, kan brukeren miste oversikten eller gå glipp av innhold. Med Accessibility Insights blir slike semantiske strukturer synlige når du testing.

Det samme gjelder landemerker. Landemerker er en merkelapper som forteller hjelpemidler hva ulike deler av siden er, som hovedinnhold, navigasjon, toppområde, bunnområde eller søk. For brukere som navigerer med hjelpemidler, fungerer landemerker omtrent som tydelige skilt på et kart som gjør det lettere å finne frem.

3. Sørg for at lenkers mål er forståelig

Lenketekster bør fortelle tydelig hvor lenken leder. «Les mer», «klikk her» og «denne siden» gir lite mening når de tas ut av kontekst. For mange brukere er det vanlig å hente opp en liste over alle lenker på siden. Da må hver lenke kunne stå på egne ben.

Spør deg selv: Forstår jeg hvor lenken fører hvis jeg bare leser lenketeksten? Hvis svaret er nei, bør teksten skrives om. «Aktivitet under samvær» er for eksempel langt mer beskrivende enn «les mer».

4. Skill mellom dekorative og meningsbærende bilder

Ikke alle bilder skal ha alternativ tekst (alt-tekst). Meningsbærende bilder skal beskrives, fordi brukeren ellers går glipp av viktig informasjon. Dekorative bilder bør derimot skjules for hjelpemidler, slik at de ikke skaper unødvendig støy.

Det viktigste spørsmålet er: Tilfører bildet informasjon i denne konteksten? Det samme bildet kan være dekorativt ett sted og meningsbærende et annet. Derfor må alternativ tekst alltid vurderes i sammenheng med innholdet rundt.

Gode alt-tekster er korte og konkrete. De starter med det viktigste og beskriver bare det brukeren trenger for å forstå innholdet. Unngå å beskrive mer enn nødvendig.

5. Reduser sannsynligheten og konsekvensen av feil

Skjemaer er ofte der brukere møter mest friksjon. Derfor må vi hjelpe brukeren forhindre at feil oppstår og når dersom noe faktisk går galt.

Obligatoriske felt må være tydelig merket. Hvis alle felt er obligatoriske, holder det å opplyse om det i starten av skjemaet. Hvis noen felt er valgfrie, må de obligatoriske feltene merkes som obligatoriske. Bruker du symboler, som en stjerne, må du forklarte hva symbolet er før det tas i bruk.

Feilmeldinger må være presise, tekstlige og knyttet til feltet der feilen oppstod. Farge alene er ikke nok for å vise at noe er feil. Og ikke minst: Vær forsiktig med deaktiverte knapper. En deaktivert knapp forteller ofte brukeren at noe er feil, men ikke hva som brukeren må gjøre for å komme videre.

6. Gjør skjemaer lettere å fylle ut

Riktig semantikk gjør skjemaer enklere å fylle ut. Hvis et felt ber om et telefonnummer, bør det bruke riktig input-type, slik at brukere på mobil får opp talltastaturet. Det samme gjelder felt for e-post, dato, tall og andre vanlige felt.

Autocomplete kan også gjøre stor forskjell. Nettleseren kan foreslå navn, telefonnummer, adresse og e-post, slik at brukeren slipper å skrive alt manuelt. Samtidig må vi vurdere konteksten. I noen tilfeller, for eksempel ved registrering av besøkende på en delt enhet, bør vi ikke lagre eller foreslå tidligere utfylt informasjon.

Ledetekster må også være tydelige. «Navn» er ofte for upresist. Mener vi fornavn, etternavn, fullt navn eller navnet på en virksomhet? Placeholder-tekst kan ikke erstatte ledetekst, fordi den forsvinner når brukeren begynner å skrive.

7. Vis brukeren hvor hen er

Alle interaktive elementer må ha synlig fokus når brukeren navigerer med tastatur. Det skal være tydelig hvor brukeren befinner seg på siden.

Nettleserens standardfokus kan være tilstrekkelig i noen tilfeller, men fungerer ikke alltid godt på alle bakgrunner. Derfor bør fokusstil utformes bevisst og spesifiseres i skisser og designsystem. Fokusstil er også en god anledning til å bruke tema-farger på en gjennomtenkt måte.

Husk også at fokusmarkeringen bør ha god nok kontrast, minst 3:1, og må fungere på ulike bakgrunnsfarger der det brukes.

8. Ha kontroll på kontraster og fargebruk

Farge skal aldri være den eneste måten å formidle informasjon på. Hvis et diagram bare skiller mellom eller navngir kategorier ved hjelp av farge, kan mange brukere miste viktig informasjon. Bruk derfor tekst, mønstre, ikoner eller direkte merking i tillegg.

God kontrast er like viktig. Tekst bør som hovedregel ha minst 4,5:1 i kontrast mot bakgrunnen. Meningsbærende grafikk, som ikoner, rammer rundt skjemafelt og fokusmarkeringer, bør ha minst 3:1.

For designere betyr dette at kontrast ikke bør kontrolleres helt til slutt. Den bør bygges tidlig inn i fargepaletter, komponenter og design tokens.

9. Test skalering på flere måter

Mange brukere forstørrer innholdet. Derfor må vi teste mer enn vanlig responsivitet. Sjekk generell zoom opptil 400 prosent, tekstforstørrelse opptil 200 prosent og brukerjustert tekstavstand.

Når du tester, se etter fire ting: Blir endringene respektert? Havner innhold oppå annet innhold? Blir innhold kuttet eller liggende utenfor siden? Oppstår både horisontal og vertikal rulling (scrolling) samtidig?

Unngå unødvendig bruk av !important i CSS. Det kan hindre brukeren i å overstyre visningen.

10. Ikke la innhold bevege seg uten kontroll

Bevegelse kan gjøre det vanskelig å lese, forstå og orientere seg. Innhold som starter automatisk og varer i mer enn fem sekunder, må kunne pauses, stoppes eller skjules.

Dette gjelder ikke bare video og GIF-er. Det kan også gjelde karuseller, animasjoner, tellere, løpende bannere og andre bevegelige elementer. Som designer bør du stille to spørsmål: Trenger dette egentlig å bevege seg? Og hvis ja: Hvordan gir vi brukeren kontroll?

11. La brukeren hoppe over repeterende innhold

De fleste nettsider skal ha en «hopp til hovedinnhold»-lenke. Lenken kan være visuelt skjult til den får fokus, men må bli synlig når den får fokus. Den bør føre brukeren direkte til hovedinnholdet, helst til første overskrift i hovedområdet (main-landemerket).

Dette er særlig viktig for tastaturbrukere. Uten en slik snarvei må brukeren tabbe seg gjennom logo, menyer, søk, navigasjon og annet repeterende innhold for hver gang siden lastes.

Skip-lenker kan også være nyttige andre steder, for eksempel for å hoppe forbi lange karuseller eller repeterende produktlister.

12. Øv på å navigere med tastatur

Til slutt: Bruk tastaturet selv. Tab flytter fokus fremover. Shift + Tab flytter fokus bakover. Enter aktiverer lenker og knapper. Mellomrom brukes blant annet for avkrysningsbokser. Piltaster brukes blant annet for radioknapper og fane-paneler.

All funksjonalitet skal kunne brukes med tastatur alene. Det skal ikke finnes tastaturfeller, og fokusrekkefølgen skal være logisk. Test i begge retninger. Sjekk at fokuset havner der du forventer, at fokusmarkeringen er synlig, og at du kan hoppe direkte til hovedinnholdet.

Hva nå?

Universell utforming blir best når det bygges inn i måten vi jobber på. Ikke vent til løsningen er ferdig utviklet. Start i innsiktsarbeidet, i skissene, i designsystemet, i komponentbiblioteket og i samtalene mellom designer, utvikler, innholdsprodusent og produkteier.

Det er alltid mer å lære. Men når vi vet mer, står vi egentlig ovenfor ettvalg: Vi kan aktivt inkludere, eller vi kan aktivt ekskludere.

La oss velge å aktivt inkludere.