Så skapar du digital tillgänglighet för alla med hjälp av universell design

Här nedan förklarar vi de sju principerna för universell design – och visar hur du kan tillämpa dem i digitala gränssnitt som webbplatser, appar och dokument.

Källa: The Center for Universal Design, North Carolina State University

1. Likvärdig användning

Designen ska fungera för personer med olika förmågor – utan att någon särbehandlas.

Exempel från digital tillgänglighet:

• Alla ska kunna boka en biljett på samma webbplats – med mus, tangentbord eller skärmläsare.
• Undvik att skapa separata ”tillgängliga versioner” av innehåll. Gör originalet tillgängligt för alla.
• Säkerhetsfunktioner som Bank-ID eller kontaktformulär ska fungera oavsett hjälpmedel.
• Gränssnittet ska vara visuellt tilltalande och begripligt för alla.

2. Flexibilitet i användning

Användaren ska kunna välja hur hen interagerar – efter sina behov och preferenser.

Exempel från digital tillgänglighet:

• En webbplats kan användas med mus, tangentbord eller röststyrning.
• Inget ska kräva höger- eller vänsterhänthet – alla funktioner fungerar oavsett.
• Klickytor och fält är stora och tydliga, vilket minskar kravet på precision.
• Innehållet är tillgängligt även om användaren behöver mer tid.

3. Enkel och intuitiv användning

Det ska vara lätt att förstå hur tjänsten fungerar, även utan förkunskap eller fokus.

Exempel från digital tillgänglighet:

• Startsidan har tydlig struktur, enkel meny och korta texter.
• Loggan leder till startsidan, som användare förväntar sig.
• Texten är skriven med enkelt språk, och viktiga delar är översatta.
• Viktig information visas först.
• Formulär ger tydlig återkoppling vid fel, till exempel: ”Ange en giltig e-postadress” där du även visar formatet på det ska skrivas in med ett enkelt exempel.

4. Uppfattbar information

Användaren ska kunna ta till sig innehållet – oavsett sinnesförmåga eller omgivning.

Exempel från digital tillgänglighet:

• Viktig information presenteras både som text, ljud och bild.
• Textstorlek och kontraster gör det lätt att läsa.
• Knappar och länkar är tydligt märkta, till exempel ”Lägg i varukorg”.
• Webbplatsen fungerar med skärmläsare och andra hjälpmedel.

5. Tolerans för misstag

Designen ska förebygga fel – och göra det lätt att rätta till dem.

Exempel från digital tillgänglighet:

• Viktiga åtgärder som till exempel att ”Radera konto” kräver dubbel bekräftelse.
• Formulär säger till om något saknas innan det skickas.
• Användaren kan ångra eller ändra ett val innan beställningen slutförs.
• Autospar gör att formulärdata inte förloras om sidan laddas om.

6. Låg fysisk ansträngning

Det ska vara enkelt och bekvämt att använda tjänsten – även för den som har begränsad styrka eller uthållighet.

Exempel från digital tillgänglighet:

• Navigeringen kräver inte långa musrörelser.
• Innehåll är lätt att nå utan att scrolla eller klicka för mycket.
• Användaren kan hoppa mellan fält med tangenter.
• Inga funktioner kräver att man håller inne knappar.

7. Storlek och utrymme för åtkomst och användning

Gränssnittet ska fungera oavsett skärmstorlek, rörelseförmåga eller användarens teknik.

Exempel från digital tillgänglighet:

• Viktiga knappar är alltid synliga, även på små skärmar.
• Responsiv design gör att innehållet fungerar på både mobil och dator, samt i liggande och stående format.
• Klickytor är tillräckligt stora – minst 44×44 pixlar.
• Gränssnittet fungerar med alternativa styrsätt, som till exempel med ögonstyrning eller huvudmus.

Du hittar fler tips och inspiration på vår samlingssida: Digital tillgänglighet – inspiration och tips