ryoji-iwata-697773-unsplash
>

8 tips för en inkluderande design

Elisabeth Mark 
16 jan 2019

"Design för alla" betyder att alla har möjlighet att ta del av information, oavsett funktionsförmåga. Istället för att bygga speciallösningar bör man tänka inkluderande design redan i början av designprocessen. Alla vinner på detta i slutändan; alla besökare känner sig sedda, och du exkluderar inte de 20% av befolkningen. Dessutom är det ju numera lag på att offentlig sektor måste följa WCAG 2.0. Här kommer mina 8 bästa tips.

1. Kontrast

Använd ett verktyg för att mäta kontrasten mellan text och bakgrund. Sträva efter att nå AA-nivå.

Använd inte endast färg för att särskilja innehåll eller förmedla information.

Kontraster
Sträva minst att uppnå nivå AA.

2. Klickbarhet

Skapa generösa klickytor runt alla klickbara element, minst 44x44 pixlar. Testa att klicka på knappar och länkar med ’fel’ hand (alltså vänster om du är högerhänt).

Klickytor
Minst 44X44 pixlars klickyta

3. Tangentbordsnavigering

Gör det möjligt att navigera på webbplatsen genom att tabba dig fram endast med tangentbord. Bygg upp i en logisk tabbordning.

Testa dig fram genom att koppla ur musen – kan du använda dig av alla funktioner med endast tangentbordet?

 

4. Alt-texter och textalternativ

Använd alt-attribut för att beskriva innehåll i bilder så att skärmläsare kan läsa upp innehållet. Syntolka eller beskriv med text allt rörligt material.

alt-texter
Använd beskrivande alt-attribut

5. Felmeddelanden

Visa tydligt i positiv form var ett fel uppstått och hur det kan rättas till, till exempel det korrekta formatet för det aktuella formulärfältet.

felmeddelanden-1
Använd förklarande felmeddelanden

6. Tydliga texter och länkar

Använd beskrivande länktexter, sidtitlar och rubriker. Skriv inte ’Läs mer’ eller ’Klicka här’ på en knapp, utan beskriv istället vart länken leder.

länkar
Använd beskrivande länktexter

7. Möjliggör förstoring

Låt användaren kunna förstora text upp till 200%, utan att behöva scrolla i sidled.

zoom
Möjliggör zoom upp till 200% utan att användaren behöver scrolla

8. Gör användartester

Låt riktiga användare testa produkten!