Tillgänglighet för designers: Skapa inkluderande visuell design och interaktionsdesign

En tillgänglig webbplats börjar med tillgänglig design. Många av de vanligaste tillgänglighetsbristerna — otillräcklig färgkontrast, otydlig navigation, förvirrande layouter, saknade fokusindikatorer — har sitt ursprung i beslut som fattas under designfasen. När koden skrivs är dessa problem inbakade, och att åtgärda dem kräver omdesign snarare än enkla kodjusteringar.

Som designer har du mer inflytande över tillgänglighet än nästan någon annan i teamet. De val du gör kring färg, typografi, mellanrum, navigationsmönster och interaktionsmodeller avgör om miljontals användare effektivt kan interagera med din produkt.

Färgkontrast

Otillräcklig färgkontrast är ett av de vanligaste tillgänglighetsproblemen på webben. WCAG kräver ett minsta kontrastförhållande på 4,5:1 mellan text och dess bakgrund för text i normal storlek, och 3:1 för stor text (definierad som 18pt normal eller 14pt fetstil). På nivå AAA ökar kravet till 7:1 för normal text och 4,5:1 för stor text.

Dessa förhållanden finns eftersom personer med nedsatt syn, åldrande ögon eller färgseendebrister behöver tillräcklig kontrast för att skilja text från dess bakgrund. Ljusgrå text på vit bakgrund kan se elegant ut i en designskiss men blir oläslig för en betydande andel av användarna.

Icke-textelement har också kontrastkrav. Användargränssnittskomponenter — knappar, formulärfält, ikoner, fokusindikatorer — och meningsfulla grafiska objekt måste upprätthålla minst ett kontrastförhållande på 3:1 mot angränsande färger. Detta säkerställer att användare kan identifiera interaktiva element och förstå informativ grafik.

Använd kontrastkontrollverktyg genomgående i din designprocess, inte bara i slutet. Verktyg som WebAIM Contrast Checker eller Colour Contrast Analyser låter dig verifiera förhållanden innan du bestämmer dig för en färgpalett.

Färg som information

Färg får aldrig vara det enda visuella medlet för att förmedla information. Om du använder rött för att indikera fel och grönt för att indikera framgång kanske användare med färgblindhet inte kan skilja mellan de två tillstånden. Komplettera alltid färg med ytterligare indikatorer — ikoner, textetiketter, mönster eller understrykningar.

Detta gäller även för länkar. Om länkar inom ett textblock enbart urskiljs genom färg måste de uppfylla ett kontrastförhållande på 3:1 mot omgivande text eller kompletteras med en annan visuell indikator som en understrykning.

Typografi och textstorlek

All text på din webbplats måste kunna ändras i storlek upp till 200 % utan förlust av innehåll eller funktionalitet. Det innebär att designa med flexibla, relativa enheter snarare än fasta pixelstorlekar, och att säkerställa att dina layouter anpassar sig smidigt när text förstoras.

WCAG 2.2 inkluderar också krav på textmellanrum. Användare måste kunna justera radhöjd till minst 1,5 gånger teckenstorleken, styckemellanrum till minst 2 gånger teckenstorleken, teckenavstånd till 0,12 gånger teckenstorleken och ordavstånd till 0,16 gånger teckenstorleken — utan förlust av innehåll eller funktionalitet.

Länkdesign

Länkar måste vara visuellt åtskilda från omgivande text. De bör vara beskrivande och koncisa, och tala om för användarna vad de hittar när de följer länken. Använd aldrig "klicka här" eller "läs mer" som länktext utan ytterligare kontext, eftersom dessa fraser är meningslösa för skärmläsaranvändare som navigerar via länklistor.

Navigation och konsekvens

Navigation måste vara konsekvent på alla sidor på din webbplats. Användare som förlitar sig på tangentbordsnavigation eller skärmläsare bygger en mental modell av din webbplats struktur, och oväntade ändringar stör den modellen. WCAG kräver att navigationsmekanismer som visas på flera sidor förekommer i samma relativa ordning varje gång, och att komponenter med samma funktionalitet identifieras konsekvent.

Fokusindikatorer

När en användare navigerar på din webbplats med tangentbord måste det finnas en synlig indikator som visar vilket element som för närvarande har fokus. Denna fokusindikator måste vara tydligt synlig — WCAG 2.2 kräver att den inte döljs av annat innehåll (SC 2.4.11) och, på nivå AAA, att hela fokusindikatorn och den fokuserade komponenten är fullt synliga (SC 2.4.12).

Designa fokusindikatorer medvetet. Webbläsarens standardkontur är ofta otillräcklig eller tas bort av CSS-resets. Designa en anpassad fokusstil som har tillräcklig kontrast och är visuellt framträdande.

Storlek på tryckbart område

Interaktiva element måste vara tillräckligt stora för att aktiveras utan svårighet. WCAG 2.2 kräver att interaktiva mål är minst 24×24 CSS-pixlar (SC 2.5.8), inklusive eventuellt mellanrum runt målet. På nivå AAA ökar kravet till 44×44 pixlar (SC 2.5.5). Detta gynnar användare med motoriska funktionsnedsättningar, skakningar eller begränsad fingerfärdighet, liksom alla som använder en mobil enhet i en skakig miljö.

Formulärdesign

Formulär är ett av de mest kritiska områdena för tillgänglig design. Varje formulärkontroll behöver en tydligt synlig etikett som berättar för användaren vilken information som ska anges. Felmeddelanden måste vara specifika, synliga och placerade nära det fält de avser. Ge instruktioner vid behov, och undvik att enbart förlita dig på platshållartext som etikett — platshållartext försvinner när användaren börjar skriva och har ofta otillräcklig kontrast.

Designa för felförebyggande. Låt användare granska och korrigera inmatning innan inskickning, särskilt för åtgärder med betydande konsekvenser som finansiella transaktioner eller juridiska avtal. När fel upptäcks, ge tydliga förslag på hur de kan åtgärdas.

Rörelse och animation

Vissa användare upplever krampanfall, migrän eller yrsel av animerat eller blinkande innehåll. Inget på din webbplats bör blinka mer än tre gånger per sekund. Tillhandahåll kontroller för att pausa, stoppa eller dölja innehåll som rör sig, blinkar eller rullar i mer än fem sekunder. Respektera operativsystemets inställning "prefers-reduced-motion" och erbjud alternativ med reducerad rörelse för animationer.

Bilder av text

Undvik att använda bilder av text på din webbplats. Riktig text kan ändras i storlek, omformateras och läsas av hjälpmedel. Bilder av text kan inte det. De enda undantagen är logotyper och situationer där en specifik visuell presentation av text är väsentlig för den information som förmedlas.

Designers tillgänglighetschecklista

Innan du överlämnar en design till utveckling, verifiera: kontrastförhållanden uppfyller kraven för all text och interaktiva element; färg är aldrig den enda indikatorn för information; fokustillstånd är designade för alla interaktiva element; tryckbara områden uppfyller minimikraven; navigationen är konsekvent på alla sidor; feltillstånd och meddelanden är tydligt designade; text kan ändras i storlek utan att layouter bryts; animationer respekterar användarinställningar; och allt icke-textinnehåll har planerade textalternativ.