Designe for tilgjengelighet og god brukeropplevelse

Å designe for tilgjengelighet er god brukeropplevelse (UX) for alle. Tilgjengelighet på nettsider handler om å utvikle innhold og applikasjoner slik at de er tilgjengelig for et bredt spekter av mennesker, inkludert individer med visuelle, motoriske, auditive, tale- eller kognitive funksjonshemninger. Det vil si at brukervennlige nettsider skaper gode brukeropplevelser for alle.

Av Marius Wallin

Lær mer, få tilgang til e-bøker og nyheter

I brukeropplevelse, seo og bedriften sine mål snakker jeg om verdien av tilgjengelighet, mens i WCAG 2.0 går jeg igjennom hvilken standard som skal følges. Anbefaler å lese disse om du vil lære mer om tilgjengelighet på nettsider.

Før vi starter å designe må vi kjenne til målgruppen / de som bruker nettsiden. Når de er kjent, kan designprosessen starte. I avsnittene under snakker jeg om hvordan designe for tilgjengelighet som igjen bidrar til bedre brukeropplevelse. Listen er ikke komplett og er ment som en introduksjon for deg som er designer, utvikler, markedsfører eller webredaktør.

Til deg som er leder av en bedrift handler artikkelen om hvordan gjøre designet og innholdet enklere å se, forstå, oppfatte, lese, bruke samt alternativer for bruk.

Design for nedsatt syn

Generelt sett handler det om å:

Optimalisere størrelsen på fonter / tekst
Optimalisere kontrast og farger
Tilby støtte for “screen readers”

1. Optimalisere fontstørrelse

Det finnes ikke en offisiell standard, men bransjestandarden for lesbarhet er 16px, som også er standarden i en nettleser. Kravet i WCAG 2.0 er at nettsiden sitt innhold er tilpasset nettleservinduer fra 320px og oppover og at det er mulig å zoome til 200% uten at lesbarheten påvirkes negativt.

2. Optimalisere kontrast

Kontrast beskrives som hvor lett det er å skille noe fra hverandre og fra bakgrunnen. Mørk grå eller rød på svart er et eksempel på dårlig kontrast. Høyere grad av kontrast gjør at det vi leter etter er lettere å oppdage samt lese og forstå. For deg som designer finner det gode verktøy for å teste kontrasten. Et av dem er “Stark Plugin” som kan brukes i Adobe XD og Sketch.

Kontrasten måles ved å gi si noe om forholdstallet mellom fargene. Eksempelvis er forholdstallet mellom helt hvit og helt sort 21:1, som er det høyeste forholdstallet man kan oppnå. En annen faktor som må vurderes når det kommer til kontrast er størrelsen. Store / fete elementer kan ha lavere forholdstall og fortsatt være tilgjengelig.

I WCAG 2.0 er kravet til kontrast dette::

Normal tekst: under 19px fet tekst eller 24px normal:

AA: 4.5:1
AAA: 7:1

Stor tekst: 19px fet eller 24px normal, og større:

AA: 3:1
AAA: 4.5:1

I tillegg til tekst gjelder kravet om god kontrast for ikoner, skjemaer, grafikk som tabeller og grafer og effekter på knapper/skjemafelter. Slike effekter aktiveres ved å føre musepekeren over, klikke på eller når et skjemafelt er aktivt. Kravet er da 3:1.

Litt på siden av kontrast, men som påvirker synligheten er rammer rundt elementer. Mange pent designet skjemaer fjerner inputboksen og erstatter den med en understrek. I mange tilfeller gjør blir det vanskelig å vite hvor brukeren kan klikke, hvor stor den klikkbare flaten er og noen ganger hva som er selve inputfeltet. (eks)

For å teste hvordan designet på nettsiden står seg gjeldende kontrast er å skrive den ut i sort/hvitt og da gjerne med dårlig kvalitet på utskriften. Hvis det fortsatt er enkelt å skille elementene fra hverandre og forstå hva som står så kan det være en indikasjon på at nettsiden din gir verdi for de aller fleste. Det tipset kan også brukes for å teste fargen.

Optimalisere farger

I design er det også vanlig å bruke farger til å si noe om konteksten / tilhørigheten, skape konsistens m.m. Innen design har fargebruk minst to utfordringer.

Farger har ulik mening i ulike settinger og folkegrupper
Ulike farger oppfattes ikke av fargeblinde

Å være bevisst farger sin verdi er avgjørende for å gi mening til den som bruker nettsiden. Artikkelen her gir ulike eksempler på nøytrale farger som kan brukes. Når det gjelder bruk av farge skal ikke fargen alene brukes til å gi informasjonen mening. Andre og ofte bedre alternativer er å utheve, lage en ramme rundt noe som er feil, endre formen på teksten, bruke ikoner m.m.

Farge er ofte kun for å støtte opp under det som allerede er synlig.

Når det gjelder fargeblindhet gjelder det å bruke farger og fargekombinasjoner som er lett å oppfatte og forstå betydningen, uavhengig av brukergrupper. En god tommelfingerregler er at elementet vi fargelegger skal fungere selv om fargen ikke er tilgjengelig.

Eksempelvis vil en CTA med rød bakgrunnsfarge og grønn tekst eller motsatt ikke være lesbar for enkelte fargeblindhe.

3. Støtte screen readers

Ikke alle elementer på en nettside gir mening uten at man ser dem. F.eks vil det å validere felter i et skjema med en farge ikke gi mening for en som ikke ser (eller som er fargeblind). Andre elementer er bilder, ikoner, felter i skjemaer m.fl.

I beste fall har alle disse elementene tilhørende tekst som screen readers kan lese. Minimum er såkalt “alt” tekst, usynlig tekst, på bilder som screen readers kan lese opp.

Under er en oversikt over virkemidler som kan brukes for å gi mening:

Alternativ tekst til bilder og ikoner (grafikk). Hvis nettsiden ikke tilbyr alternativ tekst kan selve navnet på bildefilen bli lest opp, noe som i mange tilfeller gir svært dårlig kontekst.
Alternativ tekst til video / animasjoner (såkalt transcript)
Synlig merkelapper til skjemaer (såkalt labels)
Validering / notifikasjoner som er mulig for screen readers å oppfatte
Logisk plassering av elementer da screen readeren leser fra topp til bunn
Tekst når bilder ikke er nødvendig. En CTA i bildeform eller et bilde med mye tekst er ikke tilgjengelig
Gode titler på nettsiden (via såkalt <title></title>) men også på siden generelt

Optimalisere for nedsatt lesehastighet og forståelse

Målgruppen nettsiden prøver å nå kan ha lese og skrivevansker som påvirker evnen til å forstå, fokusere samt hastigheten innholdet leses. I tillegg kan enkelte ha utfordringer med å forstå hva enkelte ord betyr.

Da innholdet er det viktigste på nettsides er det viktig å ivareta noen disse anbefalingene for lesbarhet.

Bruke fonter som er lette å lese
Plassere innholdet til venstre eller høyre (avhengig av målgruppen)
Minimum 1.5x linjeavstand i paragrafer
Maks 80 bokstaver på en linje
Strukturere innholdet for scanning ved bruk av overskrifter og god luft mellom tekstelementer
Kortere avsnitt

Optimalisere for nedsatt motorikk

Når jeg jobbet som fysioterapeut var jeg ofte i kontakt med brukergrupper som hadde utfordringer med å bruke tastatur, mus og trykksensitive skjermer. F.eks MS, Parkinsons, CP m.fl er sykdommer som gjør dette vanskelig.Anbefalingene i denne sammenhengen er å gjøre det så enkelt som mulig å utføre en handling. F.eks er et klikk enklere enn “swipe” eller følge et bestemt mønster for å åpne telefonen.

Størrelsen på elementene og avstanden mellom elementene og til kanten på enheten, telefonen, er viktig å tenke på da det påvirker hvor lett det er å treffe / treffe riktig element. Størrelsen på klikkbare elementer som knapper / ikoner skal være minimum 44px2 for å være klikkbare. Når det gjelder avstanden er det ingen generell anbefaling, men det skal være enkelt nok å treffe en knapp uten å treffe en annen. Linker inne i tekst bør om det er flere linker etter hverandre også være enkle / mulig å klikke på selv om motorikken er nedsatt.

Viktig å tenke på er også at avrunding av hjørner og sirkulære elementer får mindre flate vi kan klikke på og må derfor være enda større enn rektangulær flater, (se fiks for dette her).

Tiden vi gir til å utføre en handling er også relevant. F.eks en viktig meldingsboks som kun er synlig i 2-3 sekunder før den forsvinner kan for enkelte brukergrupper gi utfordringer. Andre tilfeller er hvor du må gjennomføre en handling før f.eks du logges ut grunnet sikkerhet. I slike tilfeller bør brukerne få en mulighet til å be om mer tid.

Andre optimaliseringer som sikrer god brukeropplevelse og tilgjengelighet

Forvente at brukeren gjør feil

Norman nevner i sitt manifest om god brukeropplevelse at vi må forvente at brukerne gjør feil, og så langt som mulig forebygge at de gjør feil. Hvis en bruker gjør feil, må det være lett å:

Hente tilbake data / fortsette der man slapp
Forstå hva feilen er og hente seg inn igjen (eks når skjemaer valideres)
Få hjelp om nødvendig (gjennom FAQ, Chat, hjelpeknapper)
Tilby lagring av informasjon / autoutfylling der det er aktuelt

Mulighet for snarveier

For å gjøre innholdet så tilgjengelig som mulig bør det være en mulighet å gå rett til innholdet “skip-to-content” på siden. Det gjør at brukere som ikke ser hele eller deler av innholdet slipper å navigere over en rekke elementer før de kan lese selve teksten.

I tillegg bør det være mulig å navigere, aktivere og avslutte handlinger kun ved bruk av tastatur. Det kan f.eks være å åpne og lukke en hamburgermeny, sende et skjema m.m. En del av dette løses ved å bruke HTML elementer slik de er tiltenkt. En knapp er en knapp, en link er en link m.m. Designere faller ofte for fristelsen å bruke elementer som ikke har eller som har feil semantisk betydning og gjøre de om til noe annet enn det de er.

Når det gjelder snarveier er det viktig å være klar over at bruken av hurtigtaster kan gi utfordringer for screen readers og om tastene er nærme hverandre gi uønsket handling for brukeren.

Gjør det lett å forstå nettsiden din og kontrollere elementer

Ulike brukergrupper har kognitive utfordringer og bruker mer tid og energi å forstå nettsiden din.

For alle som bruker nettsiden din er det anbefalt å:

Gjøre designet konsistent da det gjør det lettere å vite hvordan nettsiden fungerer og hvor man kan forvente å finne ulike former for innhold
Gi linker gode beskrivelse og være konsistent på at linker som går til samme sted har samme navn
Gjøre det enkelt å forstå hvilken side du har kommet til
Ha brødsmuler som viser hvor i hierarkiet brukeren er
Fremheve elementer som er i “fokus” f.eks når man bruker tab til å navigere eller klikker på et felt i et skjema
Gi brukeren mulighet til enkelt å ta bort popups og om de skal brukes vær bevisst når de brukes. Unngå også at popup som dukker opp uventet tar over navigasjonen til den som er avhengig av å bruke tab for å navigere.
La brukeren styre hvilke og hvor ofte f.eks notifikasjoner, oppdatering m.m skjer. F.eks notifikasjoner fra chat, “siste nye fancy tilbud”, “har du husket på pop-up”.
La brukeren selv styre om de vil se en video, om de vil ha lyden på og hvor fort noe vises. WCAG 2.0 nevner at det skal være mulig å kontrollere lyd som varer mer enn 3 sekunder.
Tilby alternativ til lyd der det er mulig og vær bevisst bruken av lyd.
Innen koding har vi et prinsipp som heter SOLID. S´en står for “Single responsibility”. Innen design gir vi ofte en dropdown eller andre designelementer for stort ansvar. Det kan gjøre det vanskelig for screen readers men også for andre å forstå hva som egentlig er hensikten med boksen. (eks)
Tenk også på navigasjon med hoverfunksjonalitet. Elementer skjult under “hover” vil ikke være synlig. Målet er å gjøre det synlig (enten med mindre ikon eller en infoknapp) som indikerer at noe vil skje eller er mulig å gjøre. Slike elementer blir ikke synlig med hjelpemidler som f.eks Dragon NaturallySpeaking, et verktøy som gir alle synlige linker / knapper et nummer slik at f.eks en uten armer kan gi instruksjoner til hvilket nummer som skal aktiveres.