Tilgjengelighet for designere: Skape inkluderende visuell design og interaksjonsdesign

Et tilgjengelig nettsted starter med tilgjengelig design. Mange av de vanligste tilgjengelighetsfeilene — utilstrekkelig fargekontrast, uklar navigasjon, forvirrende layouter, manglende fokusindikatorer — har sitt opphav i beslutninger tatt i designfasen. Innen koden skrives, er disse problemene innbakt, og å fikse dem krever redesign snarere enn bare kodejusteringer.

Som designer har du mer innflytelse på tilgjengelighet enn nesten alle andre i teamet. Valgene du tar om farge, typografi, mellomrom, navigasjonsmønstre og interaksjonsmodeller avgjør om millioner av brukere effektivt kan samhandle med produktet ditt.

Fargekontrast

Utilstrekkelig fargekontrast er et av de mest utbredte tilgjengelighetsproblemene på nettet. WCAG krever et minimum kontrastforhold på 4,5:1 mellom tekst og bakgrunn for normalstørrelse tekst, og 3:1 for stor tekst (definert som 18pt vanlig eller 14pt fet). På nivå AAA øker kravet til 7:1 for normal tekst og 4,5:1 for stor tekst.

Disse forholdstallene eksisterer fordi personer med nedsatt syn, aldrende øyne eller fargesynsforstyrrelser trenger tilstrekkelig kontrast for å skille tekst fra bakgrunnen. Lysegrå tekst på hvit bakgrunn kan se elegant ut i en designskisse, men blir uleselig for en betydelig andel av brukerne.

Ikke-tekstelementer har også kontrastkrav. Brukergrensesnittkomponenter — knapper, skjemafelt, ikoner, fokusindikatorer — og meningsfulle grafiske objekter må opprettholde minst et 3:1 kontrastforhold mot tilstøtende farger. Dette sikrer at brukere kan identifisere interaktive elementer og forstå informasjonsgrafikk.

Bruk kontrastsjekk-verktøy gjennom hele designprosessen, ikke bare på slutten. Verktøy som WebAIM Contrast Checker eller Colour Contrast Analyser lar deg verifisere forholdstall før du forplikter deg til en fargepalett.

Farge som informasjon

Farge må aldri være det eneste visuelle virkemiddelet for å formidle informasjon. Hvis du bruker rødt for å indikere feil og grønt for å indikere suksess, kan fargeblinde brukere kanskje ikke skille mellom de to tilstandene. Supplér alltid farge med ytterligere indikatorer — ikoner, tekstmerkelapper, mønstre eller understrekinger.

Dette gjelder også for lenker. Hvis lenker i en tekstblokk kun skilles ut med farge, må de oppfylle et 3:1 kontrastforhold mot omkringliggende tekst eller suppleres med en annen visuell indikator som understreking.

Typografi og tekststørrelse

All tekst på nettstedet ditt må kunne forstørres opp til 200 % uten tap av innhold eller funksjonalitet. Dette betyr å designe med fleksible, relative enheter i stedet for faste pikselstørrelser, og sikre at layoutene tilpasser seg elegant når tekst forstørres.

WCAG 2.2 inkluderer også krav til tekstavstand. Brukere må kunne justere linjehøyde til minst 1,5 ganger skriftstørrelsen, avsnittsavstand til minst 2 ganger skriftstørrelsen, bokstavavstand til 0,12 ganger skriftstørrelsen og ordavstand til 0,16 ganger skriftstørrelsen — uten tap av innhold eller funksjonalitet.

Lenkedesign

Lenker må være visuelt tydelige fra omkringliggende tekst. De bør være beskrivende og konsise, og fortelle brukerne hva de finner når de følger lenken. Bruk aldri «klikk her» eller «les mer» som lenketekst uten ytterligere kontekst, da disse frasene er meningsløse for skjermleserbrukere som navigerer via lenkelister.

Navigasjon og konsistens

Navigasjon må være konsekvent på tvers av alle sider på nettstedet ditt. Brukere som er avhengige av tastaturnavigasjon eller skjermlesere bygger en mental modell av nettstedets struktur, og uventede endringer forstyrrer den modellen. WCAG krever at navigasjonsmekanismer som vises på flere sider, forekommer i samme relative rekkefølge hver gang, og at komponenter med samme funksjonalitet identifiseres konsekvent.

Fokusindikatorer

Når en bruker navigerer nettstedet ditt med tastatur, må det være en synlig indikator som viser hvilket element som for øyeblikket har fokus. Denne fokusindikatoren må være tydelig synlig — WCAG 2.2 krever at den ikke tildekkes av annet innhold (SC 2.4.11), og på nivå AAA at hele fokusindikatoren og den fokuserte komponenten er fullt synlig (SC 2.4.12).

Design fokusindikatorer med hensikt. Standardomrisset i nettleseren er ofte utilstrekkelig eller fjernes av CSS-tilbakestillinger. Design en egendefinert fokusstil som har tilstrekkelig kontrast og er visuelt fremtredende.

Størrelse på trykkemål

Interaktive elementer må være store nok til å aktiveres uten vanskeligheter. WCAG 2.2 krever at interaktive mål er minst 24×24 CSS-piksler (SC 2.5.8), inkludert eventuelt mellomrom rundt målet. På nivå AAA øker kravet til 44×44 piksler (SC 2.5.5). Dette er til nytte for brukere med motoriske funksjonsnedsettelser, skjelvinger eller begrenset finmotorikk, samt alle som bruker en mobil enhet i en urolig omgivelse.

Skjemadesign

Skjemaer er et av de mest kritiske områdene for tilgjengelig design. Hvert skjemaelement trenger en tydelig synlig merkelapp som forteller brukeren hvilken informasjon som skal oppgis. Feilmeldinger må være spesifikke, synlige og plassert nær feltet de refererer til. Gi instruksjoner der det trengs, og unngå å bruke kun plassholdertekst som merkelapp — plassholdertekst forsvinner når brukeren begynner å skrive og har ofte utilstrekkelig kontrast.

Design for feilforebygging. La brukere gjennomgå og korrigere inndata før innsending, spesielt for handlinger med betydelige konsekvenser som finansielle transaksjoner eller juridiske avtaler. Når feil oppdages, gi tydelige forslag til hvordan de kan rettes.

Bevegelse og animasjon

Noen brukere opplever anfall, migrene eller svimmelhet fra animert eller blinkende innhold. Ingenting på nettstedet ditt bør blinke mer enn tre ganger per sekund. Tilby kontroller for å pause, stoppe eller skjule innhold som beveger seg, blinker eller ruller i mer enn fem sekunder. Respekter operativsystemets «prefers-reduced-motion»-innstilling og tilby alternativer med redusert bevegelse for animasjoner.

Bilder av tekst

Unngå å bruke bilder av tekst på nettstedet ditt. Ekte tekst kan forstørres, omformateres og leses av hjelpeteknologier. Bilder av tekst kan ikke det. De eneste unntakene er logoer og situasjoner der en bestemt visuell presentasjon av tekst er avgjørende for informasjonen som formidles.

Designerens sjekkliste for tilgjengelighet

Før du overleverer et design til utvikling, verifiser: kontrastforhold oppfyller kravene for all tekst og interaktive elementer; farge er aldri den eneste indikatoren på informasjon; fokustilstander er designet for alle interaktive elementer; trykkemål oppfyller minstekravene; navigasjon er konsekvent på tvers av alle sider; feiltilstander og meldinger er tydelig utformet; tekst kan forstørres uten å bryte layouter; animasjoner respekterer brukerpreferanser; og alt ikke-tekstinnhold har planlagte tekstalternativer.