Vanlige designfeil som er enkle å rette

Mange digitale løsninger ser flotte ut, men kan være umulige å bruke for personer med nedsatt funksjonsevne. Denne artikkelen er for designere, frontend-utviklere og redaktører.

Lav kontrast mellom tekst og bakgrunn

Lav kontrast mellom tekst og bakgrunn blir fort et problem for personer med nedsatt syn eller fargeblindhet, og gjør at de kan slite med å lese teksten.

Løsningen på dette er å bruke kontraster som oppflyller «WCAG 2.1 Nivå AA», hvor minimumskontrasten er 4.5:1 for vanlig tekst mot bakgrunn, og 3:1 for stor tekst.

Tips for designkonsulenter som skal sjekke kontrast på forskjellige nettsider, og ikke har så mye erfaring med inpeksjonsverktøy i nettlesere anbefales det å bruke et verktøy for dette. WebAIM Contrast Checker er et godt gratis verktøy for å sjekke kontrast. Det er også mulig å laste ned kontrastvektøyet Color Contrast Analyser (veldig enkelt å bruke). Disse verktøyene vil fortelle deg om kontrasten oppfyller WCAG-kriteriene.

Uforstålige lenketekster

Lenketekstene kan bli uforståelige for skjermleserbrukere hvis de ikke får noe kontekst. For en skjermleserbruker som vil se lenker på siden vil bare lenketeksten bli lest opp, og da får ikke vedkommende med seg konteksten.

Eksempel på dårlig lenke: "klikk her".

«Klikk her» som i eksempelet ovenfor eller den klassiske «Les mer» gir ingen informasjon om hva brukeren faktisk får ved å trykke på lenken.

Eksempel på god lenke: "Les mer om hvordan du lager tilgjenglige nettsider"

Denne lenken gir både mening i og utenfor kontekst. Den er nyttig for skjermleserbrukere, men også for alle som vil skanne innholdet på siden raskt.

Bruk av kun farge for å formidle informasjon

Å bruke kun farge for å kommunisere informasjon er et vanligere og større problem enn mange tror. Det oppstår ikke nødvendigvis bare på informasjonsnettsider, men dukker ofte opp i komplekse verktøy, for eksempel dashbord, rapporteringssystemer eller prosjektstyringsverktøy.

Et typisk eksempel finner vi i risikostyringsverktøy hvor man bruker farger, ofte i form av trafikklys for å vise status:

• Grønn = alt er i orden
• Gul = lav eller moderat risiko
• Rød = kritisk

Disse vises gjerne i tabeller eller lister for å gi rask oversikt.

Her er et eksempel på hvordan dette kan påvirke en befaring på en byggeplass:

Tenk deg et verktøy som viser status for ulike sikkerhetstiltak på en byggeplass. I en tabell har hver rad en farget sirkel i kolonnen «Risiko» for å indikere tilstanden. En kontrollør får i oppgave å sjekke tiltakene. Det ingen vet, er at personen har rød-grønn fargeblindhet, den vanligste formen for fargeblindhet. Når vedkommende ser tabellen, ser alle sirklene ganske like ut. Det blir umulig å se hva som er "trygt" og hva som er "kritisk", uten å klikke seg inn på hver enkelt rad for mer informasjon.

Under kan du se en tabell som gir et eksempel på dette.

Konsekvensen av dette er en oppgave som kunne vært gjort på få minutter, tar plutselig dobbelt så lang tid og risikoen for feil øker betraktelig.

Det som er bra er at det finnes veldig enkle løsninger. Man kan velge å beholde fargene, ved å ha fargede ikoner (varseltrekant, en eks, et haketegn). Den beste løsningen kan også være å bare bruke tekst ved siden av fargen for eksempel: grønn «Lav», gul «Moderat», rød «Høy risiko».

Tastturfokus

Tastaturfokus er noe mange ikke tenker over, men for personer med motoriske utfordringer eller som av andre grunner ikke bruker mus, er det avgjørende.

Når man bruker Tab-tasten på tastaturet, hopper man mellom interaktive elementer som lenker, knapper og skjemafelt. For å gå bakover bruker man Shift + Tab. Det elementet man navigerer til får et visuelt fokusmerke, som viser hvor på siden man befinner seg.

Problemet: Utydelig eller manglende fokusmarkering

Mange nettsteder tar ikke høyde for hvordan denne markeringen ser ut. Standardfargen for tastaturfokus varierer mellom nettlesere, og på enkelte bakgrunner kan den være nesten usynlig. Hvis du for eksempel har en mørk nettside med svarte knapper, og standard markering er en mørk blå kant, kan brukeren lett miste oversikten over hvor fokuset er.

Dette gjør det svært vanskelig, og noen ganger umulig, for tastaturbrukere å vite hvor de er, noe som gjør navigasjonen frustrerende eller ubrukelig.

Løsninger her er å designe et tydelig og kontraststerkt fokusutseende som fungerer godt mot alle bakgrunner og elementer på siden. Dette kan du gjøre med CSS:

:focus {

outline: 3px solid #FFD700; /* Gullfarget fokusramme */

outline-offset: 2px;

}

Her har vi gitt fokusrammen en gul farge, og i tillegg brukt outline-offset for å få et mellomrom mellom elementene som blir fokusert og markeringen, noe som gjør at markeringen blir enda tydligere.

Bilder uten alternativ tekst

Når en nettside inneholder bilder, er det viktig at disse har alternativtekst (også kalt alt-tekst). Alternativteksten beskriver bildet for brukere som ikke ser det, enten fordi de bruker skjermleser, har deaktivert bilder, eller av andre grunner ikke får det visuelt presentert.

Dette er spesielt viktig for informative eller innholdsrelaterte bilder. Hvis bildet bidrar med informasjon som ikke finnes i selve teksten, må den samme informasjonen formidles i alternativteksten.

Tenk deg en nettside med et stort bilde av en bil som krasjer inn i en annen, og en oppgitt sjåfør som tar seg til hodet. Rett under står overskriften:
"Hater du når dette skjer?"

Uten en alternativtekst som for eksempel:
alt="Bil som krasjer i annen bil, sjåfør ser oppgitt ut og tar seg til hodet",
vil en skjermleserbruker ikke få med seg det visuelle innholdet, og dermed miste poenget med overskriften. Det er vanskelig å "hate når dette skjer" – hvis man ikke vet hva "dette" er.

Dersom bildet kun er dekorativt, altså ikke tilfører innhold eller mening, skal det ikke ha en beskrivende alt-tekst. I stedet bruker man en tom alternativtekst slik:

<img src="blomsterbakgrunn.jpg" alt="" />

Dette forteller skjermleseren at bildet kan ignoreres. Hvis man utelater alt-attributtet helt, risikerer man at skjermleseren leser opp filnavnet (f.eks. "blomsterbakgrunn.jpg"), noe som skaper unødvendig støy og dårlig brukeropplevelse.