Tilgængelighed for designere: Skab inkluderende visuelt og interaktionsdesign

Et tilgængeligt website begynder med tilgængeligt design. Mange af de mest almindelige tilgængelighedsfejl — utilstrækkelig farvekontrast, uklar navigation, forvirrende layout, manglende fokusindikatorer — stammer fra beslutninger truffet i designfasen. Når koden er skrevet, er disse problemer indlejret, og at rette dem kræver redesign snarere end blot kodejusteringer.

Som designer har du mere indflydelse på tilgængelighed end næsten alle andre på teamet. De valg, du træffer om farve, typografi, afstand, navigationsmønstre og interaktionsmodeller, afgør, om millioner af brugere effektivt kan interagere med dit produkt.

Farvekontrast

Utilstrækkelig farvekontrast er et af de mest udbredte tilgængelighedsproblemer på nettet. WCAG kræver et minimumskontrastforhold på 4,5:1 mellem tekst og dens baggrund for normaltekst og 3:1 for stor tekst (defineret som 18pt normal eller 14pt fed). På niveau AAA stiger kravet til 7:1 for normaltekst og 4,5:1 for stor tekst.

Disse forhold eksisterer, fordi mennesker med nedsat syn, aldrende øjne eller farvesvagheder har brug for tilstrækkelig kontrast til at skelne tekst fra baggrunden. Lysegrå tekst på en hvid baggrund kan se elegant ud i et designmockup, men bliver ulæselig for en betydelig procentdel af brugerne.

Ikke-tekstelementer har også kontrastkrav. Brugergrænsefladekomponenter — knapper, formularfelter, ikoner, fokusindikatorer — og meningsfulde grafiske objekter skal opretholde mindst et 3:1 kontrastforhold mod tilstødende farver. Dette sikrer, at brugere kan identificere interaktive elementer og forstå informationsgrafik.

Brug kontrastkontrolværktøjer gennem hele din designproces, ikke kun til sidst. Værktøjer som WebAIM Contrast Checker eller Colour Contrast Analyser lader dig verificere kontrastforhold, før du fastlægger en farvepalet.

Farve som information

Farve må aldrig være det eneste visuelle middel til at formidle information. Hvis du bruger rødt til at angive fejl og grønt til at angive succes, kan farveblinde brugere muligvis ikke skelne mellem de to tilstande. Supplér altid farve med yderligere indikatorer — ikoner, tekstlabels, mønstre eller understregninger.

Dette gælder også for links. Hvis links i en tekstblok kun adskiller sig ved farve, skal de opfylde et 3:1 kontrastforhold mod den omgivende tekst eller suppleres med en anden visuel indikator som en understregning.

Typografi og tekststørrelse

Al tekst på dit website skal kunne forstørres op til 200 % uden tab af indhold eller funktionalitet. Det betyder, at du skal designe med fleksible, relative enheder frem for faste pixelstørrelser, og sikre at dine layouts tilpasser sig elegant, når teksten forstørres.

WCAG 2.2 indeholder også krav til tekstafstand. Brugere skal kunne justere linjehøjden til mindst 1,5 gange skriftstørrelsen, afsnitsafstanden til mindst 2 gange skriftstørrelsen, bogstavafstanden til 0,12 gange skriftstørrelsen og ordafstanden til 0,16 gange skriftstørrelsen — uden tab af indhold eller funktionalitet.

Linkdesign

Links skal visuelt skille sig ud fra omgivende tekst. De skal være beskrivende og kortfattede og fortælle brugerne, hvad de finder, når de følger linket. Brug aldrig "klik her" eller "læs mere" som linktekst uden yderligere kontekst, da disse formuleringer er meningsløse for skærmlæserbrugere, der navigerer via linklister.

Navigation og konsistens

Navigation skal være konsistent på tværs af alle sider på dit site. Brugere, der er afhængige af tastaturnavigation eller skærmlæsere, opbygger en mental model af dit sites struktur, og uventede ændringer forstyrrer den model. WCAG kræver, at navigationsmekanismer, der vises på flere sider, optræder i den samme relative rækkefølge hver gang, og at komponenter med samme funktionalitet identificeres konsistent.

Fokusindikatorer

Når en bruger navigerer dit site med tastatur, skal der være en synlig indikator, der viser, hvilket element der aktuelt har fokus. Denne fokusindikator skal være tydeligt synlig — WCAG 2.2 kræver, at den ikke skjules af andet indhold (SC 2.4.11), og på niveau AAA, at hele fokusindikatoren og det fokuserede element er fuldt synligt (SC 2.4.12).

Design fokusindikatorer bevidst. Standard browseromridset er ofte utilstrækkeligt eller fjernes af CSS-resets. Design en tilpasset fokusstil, der har tilstrækkelig kontrast og er visuelt fremtrædende.

Trykflademål

Interaktive elementer skal være store nok til at kunne aktiveres uden besvær. WCAG 2.2 kræver, at interaktive trykflader er mindst 24×24 CSS-pixels (SC 2.5.8), inklusive eventuel whitespace omkring trykfladen. På niveau AAA stiger kravet til 44×44 pixels (SC 2.5.5). Dette gavner brugere med motoriske handicap, rystelser eller begrænset fingerfærdighed, samt alle der bruger en mobilenhed i et ustabilt miljø.

Formulardesign

Formularer er et af de mest kritiske områder for tilgængeligt design. Hvert formularfelt kræver en tydeligt synlig label, der fortæller brugeren, hvilken information der skal angives. Fejlmeddelelser skal være specifikke, synlige og placeret tæt på det felt, de vedrører. Giv instruktioner, hvor det er nødvendigt, og undgå at bruge udelukkende pladsholdertekst som label — pladsholdertekst forsvinder, når brugeren begynder at skrive, og har ofte utilstrækkelig kontrast.

Design til fejlforebyggelse. Giv brugere mulighed for at gennemgå og rette input før indsendelse, især ved handlinger med betydelige konsekvenser som finansielle transaktioner eller juridiske aftaler. Når fejl opdages, giv klare forslag til, hvordan de kan rettes.

Bevægelse og animation

Nogle brugere oplever anfald, migræne eller svimmelhed fra animeret eller blinkende indhold. Intet på dit website bør blinke mere end tre gange i sekundet. Giv kontroller til at sætte på pause, stoppe eller skjule indhold, der bevæger sig, blinker eller ruller i mere end fem sekunder. Respektér operativsystemets "prefers-reduced-motion"-indstilling og tilbyd alternativer med reduceret bevægelse for animationer.

Billeder af tekst

Undgå at bruge billeder af tekst på dit website. Rigtig tekst kan forstørres, omformateres og læses af hjælpeteknologier. Billeder af tekst kan ikke. De eneste undtagelser er logoer og situationer, hvor en bestemt visuel præsentation af tekst er afgørende for den information, der formidles.

Designerens tilgængelighedstjekliste

Før du overdrager et design til udvikling, verificér: kontrastforhold opfylder kravene for al tekst og alle interaktive elementer; farve er aldrig den eneste informationsindikator; fokustilstande er designet for alle interaktive elementer; trykflader opfylder minimumsstørrelseskravene; navigation er konsistent på tværs af alle sider; fejltilstande og -meddelelser er tydeligt designet; tekst kan forstørres uden at ødelægge layouts; animationer respekterer brugerindstillinger; og alt ikke-tekstuelt indhold har planlagte tekstalternativer.