Designa för WCAG 2.2 – en praktisk start
Av CodexierPublicerad 6 min läsning
Tillgänglighet lämnas ofta till utvecklarna som en sista kontroll, vilket är det dyraste stället att upptäcka att varumärkets ljusgrå text underkänns på kontrast på varje sida. WCAG 2.2, den aktuella versionen av riktlinjerna bakom Sveriges och EU:s tillgänglighetskrav, innehåller en uppsättning kriterier som avgörs i designfasen. Den här guiden tar upp dem, i den ordning de brukar bita, med en konkret kontroll för vart och ett.
Kontrast och färganvändning
Kontrast är där de flesta varumärken faller först, eftersom paletten valdes för tryck eller för en logotyp, inte för text på en skärm. Kontrollera varje textfärg mot varje bakgrund den förekommer på, inklusive text på bilder, på knappar och i inaktiva lägen, med en kontrastmätare eller insticksprogrammet i ditt designverktyg. När en varumärkesfärg underkänns, behåll den för stora rubriker och dekorativa element och inför en mörkare nyans för brödtext och länkar. Kontrollera sedan att betydelse aldrig hänger på färg ensam: en röd ram runt ett felaktigt fält ska kompletteras med ikon och meddelande, och ett diagrams serier behöver etiketter eller mönster, inte bara nyanser.
Fokusmarkering och tangentbordsflöden
Den som navigerar med tangentbord, kontakt eller skärmläsare rör sig genom sidan via fokus. Saknar designfilen fokusmarkering kommer utvecklaren antingen att hitta på en eller, oftare, ta bort webbläsarens standard för att den krockar med utseendet. WCAG 2.2 skärpte det här: fokus måste vara synligt, och det nyare kriteriet om fokusutseende kräver att markeringen har tillräcklig kontrast och inte döljs bakom fasta sidhuvuden eller överlägg. Designa fokusläget för varje interaktiv komponent lika medvetet som hover-läget.
- Rita en fokusring för knappar, länkar, fält, kort och egna kontroller, med minst 3 till 1 i kontrast mot angränsande färger.
- Ordna komponenterna i filen så som en tangentbordsanvändare ska möta dem; tabbordningen följer kodordningen, och koden följer din layout.
- Se till att fasta sidhuvuden, cookiebanners och chattwidgetar aldrig täcker det fokuserade elementet.
- Ge ett sätt att hoppa över upprepad navigation, och se till att modaler fångar fokus och lämnar tillbaka det vid stängning.
Klickytor och avstånd
WCAG 2.2 lade till ett kriterium för minsta klickyta på AA-nivå: interaktiva ytor bör vara minst 24 gånger 24 CSS-pixlar, eller ha tillräckligt avstånd så att en cirkel på 24 pixlar runt dem inte överlappar en granne. Det påverkar främst ikonknappar, paginering, taggar, stängningskryss och allt i ett tätt verktygsfält. Lösningen är sällan att göra ikonen större; det är att ge den klickbara ytan luft. Designa komponenter med träffytan uttryckligen ritad, inte bara den synliga symbolen, så bygger utvecklaren den så.
| Komponent | Vanlig brist | Designåtgärd |
|---|---|---|
| Ikonknappar i verktygsfält | Ikoner på 16 pixlar utan luft | Definiera en träffyta på 40 pixlar runt varje ikon |
| Paginering och brödsmulor | Siffror satta som vanliga textlänkar tätt ihop | Lägg till luft så att varje länk blir en bekväm yta |
| Stängningsknappar på modaler och banners | Litet kryss i hörnet | Större träffyta, och Escape-tangenten som alternativ |
| Länkar i brödtext | Undantagna från regeln om klickyta, men ofta för svaga | Understryk länkar; lita inte enbart på färg |
| Datumväljare och reglage | Små handtag och dagceller | Större handtag, dagceller med luft, och textfält som alternativ |
Mobilen är där klickytan avgör om ett formulär går att använda alls. Testa på en telefon, inte i en förhandsvisning på skrivbordet.
Formulär, etiketter och fel
Formulär är där ett företag förlorar mest på bristande tillgänglighet, eftersom det är där förfrågan, bokningen eller ordern sker. Designbesluten är raka. Varje fält har en synlig etikett ovanför eller bredvid; platshållartext försvinner när man skriver och är ingen etikett. Obligatoriska fält markeras i text, inte bara med en färg eller en asterisk utan förklaring. Felmeddelanden visas vid fältet, säger vad som gick fel och hur det rättas, och sammanfattas också överst i formuläret vid inskick. WCAG 2.2 lägger till två kriterier värda att designa för: låt inte folk skriva in uppgifter de redan gett i samma process, och lita inte på ett kognitivt test som ett pussel vid inloggning utan alternativ.
Etiketter
Synliga, kvarstående, nära fältet. Gruppera relaterade fält som adressrader under en rubrik.
Hjälptext
Formattips som hur telefonnumret ska skrivas kommer före fältet, inte efter felet.
Fel
Ikon plus text i en färg som klarar kontrasten, placerad vid fältet, med en sammanfattning som länkar till varje problem.
Inloggning
Tillåt inklistring i lösenordsfält, stöd lösenordshanterare, och erbjud BankID eller e-postlänk som alternativ till minnestester.
Rörelse och reducerad rörelse
Animation är ett designval med en tillgänglighetskostnad. Karuseller som spelar automatiskt, parallaxeffekter och animerade bakgrunder kan ge obehag för personer med vestibulära besvär och distrahera personer med koncentrationssvårigheter. WCAG kräver att allt som rör sig i mer än fem sekunder ska gå att pausa, stoppa eller dölja, och att inget blinkar mer än tre gånger per sekund. Den praktiska designregeln: designa en variant med reducerad rörelse av varje animerad komponent, så att sajten kan respektera när användarens operativsystem ber om mindre rörelse. Tona i stället för att glida, stillbild i stället för video, och ingen rörelse som bär information utan statisk motsvarighet.
När du inte behöver gå längre än så här: för en liten presentationssajt med kontaktformulär täcker kriterierna ovan det mesta som spelar roll, och en designer kan verifiera dem på en eftermiddag utan granskning. Där en granskning förtjänar sitt arvode är på sajter med kassa, bokning eller inloggade flöden, där en brist stoppar en transaktion och tillgänglighetsdirektivet nu gäller många privata tjänster. Vår UX-granskning omfattar de här kontrollerna tillsammans med användarsessionerna i användartester med fem personer. Vilket ni behöver avgör vi på ett kort samtal.
- UX-granskning och konverteringTillgänglighetskontroller mot WCAG 2.2 AA, användarsessioner och en prioriterad åtgärdslista.
- Användartester med fem personerSå ser du de här problemen drabba riktiga människor innan du åtgärdar dem.
- Boka ett kostnadsfritt 15-minuterssamtalSkicka designfilen eller adressen; vi säger vilka kriterier som är i riskzonen.
Vanliga frågor
Gäller WCAG för privata företag i Sverige?
Offentliga aktörer har i flera år varit skyldiga att uppfylla det enligt lagen om tillgänglighet till digital offentlig service. Tillgänglighetsdirektivet utökar kraven till många privata tjänster, bland annat e-handel, bank och transport, för produkter och tjänster som släpps på marknaden från 2025. Även där det inte är obligatoriskt beskriver kriterierna vad användbart betyder för en stor del av era kunder.
Vad är skillnaden mellan WCAG 2.1 och 2.2?
Version 2.2 lägger till kriterier om fokusutseende, att fokus inte får döljas, minsta klickyta, alternativ till dra-och-släpp, konsekvent hjälp, upprepad inmatning och tillgänglig inloggning, och tar bort ett föråldrat kriterium. Har ni designat för 2.1 AA är det nya arbetet främst fokuslägen, klickytor och formulär.
Kan jag kontrollera kontrast själv?
Ja. De flesta designverktyg har insticksprogram som visar kontrastförhållandet mellan text och bakgrund, och gratis webbverktyg gör samma sak för vilka två färger som helst. Kontrollera varje kombination som faktiskt förekommer på sidan, inklusive text på bilder och i inaktiva lägen, inte bara grundpaletten.
Blir sajten fulare av tillgänglig design?
Nej. Kontrast, tydliga etiketter, generösa klickytor och synligt fokus är också det som får ett gränssnitt att kännas lugnt och enkelt. Begränsningarna kring mycket ljusa gråtoner och små ikoner är verkliga, men en bra designer arbetar inom dem. Det tillgänglig design utesluter är mest dekoration som ändå skadade användbarheten.
Vill du få designfilen kontrollerad mot WCAG 2.2 innan utvecklingen börjar?
Femton minuter med en ingenjör: skicka Figma-länken eller den skarpa adressen så säger vi vilka kriterier som är i riskzonen och vad som krävs för att åtgärda dem innan koden skrivs.
Boka ett kostnadsfritt 15-minuterssamtal