Letscocreate

Tillgängligare design i 4 enkla steg

Metoder
2023-01-18
Hur stark är er innovationskraft?

Hur stark är er innovationskraft?

Gör testet

Med vårt test får du snabbt koll på vilken innovationskraft din verksamhet har.

Gör innovationskraftstestet

Goda nyheter: allt fler människor har möjlighet att ta del av eller bidra till innehåll på nätet. Den dåliga nyheten är att otillgänglig design fortfarande orsakar dåliga användarupplevelser för många av dem. Men det behöver inte vara svårt att göra sin hemsida mer lättillgänglig. Med de här enkla riktlinjerna kan du börja göra skillnad för dina användare och kanske vinna några nya på köpet.

Har tillgänglighet några baksidor?

Nej. De som ser tillgänglighet som ett nödvändigt ont har fått något om bakfoten. De har ofta fått det felaktiga intrycket att tillgänglighetsanpassning skulle vara svårt eller dyrt. Men det går utmärkt att göra sin hemsida eller app tillgänglig för fler utan att göra avkall på stil eller prestanda. Det behöver inte heller kosta mer att utveckla.

Tillgänglighet handlar inte om att tillmötesgå små grupper av befolkningen. Det handlar om att skapa bra och värdiga användarupplevelser för alla.

Om du gör din produkt mer tillgänglig så både växer din potentiella kundskara och du får en bättre design på köpet. En hemsida som fungerar för någon som föddes med en arm fungerar lika bra för någon som brutit armen och så vidare.

Det enda du behöver för att börja med tillgänglig design är kunskap. Att du läser den här artikeln är ett bra första steg!

Så kan du göra dina digitala produkter mer tillgängliga

1. Skriv enkelt och tydligt innehåll

Många svenskar har dyslexi eller andra lässvårigheter. Trötthet, koncentrationssvårigheter eller annat modersmål än svenska är andra faktorer som kan göra det svårt att läsa invecklade texter. Därför lönar det sig att skriva tillgängligt content – ju färre som behöver traggla sig igenom ditt innehåll desto bättre.

Så här kan du göra ditt content med lättläst:

  • Försök skriva max 20 ord per mening

  • Håll dina stycken korta. Nytt ämne = nytt stycke!

  • Använd listor för att stycka upp information

  • Kontrollera hur läsbar din text är med hjälp av Hemingway Editor på engelska eller Lix-räknaren på svenska

  • Se till att det går att pausa rörligt material, till exempel video

  • Anpassa innehållet för skärmläsare – se punkt 3 nedan

2. Använd färg och kontrast för att förtydliga

Det sägs att 1% av kvinnor och 8% av män har någon typ av färgblindhet. Ganska många, alltså! Och även för den som inte är färgblind blir det svårt att se vissa element om färger “flyter in” i varandra. Då kan rätt kombination av färg, kontrast och symboler göra din sida eller app mer lättläslig.

Enligt den vanligaste standarden Web Content Accessibility Guidelines (WCAG) bör minsta kontrastratio vara 4.5:1. Såhär:

Du kan pröva om dina färgval uppfyller kontrastkraven på contrast-ratio.com.Ett annat sätt att vara säker på att din information går fram, särskilt när du jobbar med diagram, är att använda dig av strukturer för att skilja på olika element.

Du bör också undvika dessa klassiska dåliga färgkombinationer:

  • Grön-röd

  • Grön-brun

  • Blå-lila

  • Grön-blå

  • Ljusgrön-gul

  • Blå-grå

  • Grön-grå

  • Grön-svart

Se även till att inte gå överstyr med färg och kontrast – det kan vara farligt för vissa epileptiker. Läs mer om det under rubrik 4.

3. Underlätta för skärmläsare

Att anpassa sin sida för skärmläsare kan vara till hjälp för många olika människor. Talsyntes och skärmläsare kan till exempel användas både av personer som inte kan se och av den som har dyslexi.

Många människor navigerar utan datormus, till exempel genom att använda Tab. Genom att tabba hoppar skärmläsaren mellan länkar och formulär och läser upp dem. Därför är det viktigt att ge dessa lämpliga namn och beskrivningar som talar om vad användaren kan förvänta sig. Istället för att skriva “tryck här för att kontakta oss” kan du till exempel skriva “tryck här för att kontakta oss”.

En annan enkel åtgärd är att lägga till relevanta alt-texter till alla bilder. Alt-texten är ursprungligen avsedd för den som inte kan se, men har börjat “missbrukas” för att få bättre Google-rankning. I själva verket spelar alt-taggen en marginell roll för SEO och att missbruka den kan avsevärt försämra upplevelsen för den som använder sidan.

Två medarbetare ur vårt designteam håller en presentation om färger under en konferens

Exempel på dålig alt-text: “digitalt team design ux-design presentation”

Exempel på förbättrad alt-text: “Två medarbetare ur vårt designteam håller en presentation om färger under en konferens”

Obs! Om du vill att skärmläsaren ska hoppa över ett objekt, till exempel en bakgrundsbild, behöver du inte lägga till någon alt-text alls.

Andra tips på hur du underlättar för skärmläsare:

  • Använd rubriker (H1, H2, H3) och använd dem i rätt ordning

  • Se till att alla element hamnar i logisk ordning när man tabbar sig fram

  • Lägg till alt-texter till grafer som förklarar vilken data som presenteras

4. Undvik automatiskt spelad media

De allra flesta tycker att det är irriterande när en hemsida plötsligt börjar spela ljud eller musik utan förvarning. För den som använder skärmläsare kan det vara ännu värre då det kan vara svårt att förstå hur man stänger av ljudet. I värsta fall kan plötsliga ljud skrämma användaren.

Blinkande eller blixtrande media bör också användas minimalt då det kan orsaka epileptiska anfall. En generell riktlinje är att undvika allt material som blinkar mer än tre gånger per sekund. Därtill finns det mönster och färger som ökar risken för anfall: ränder och rutor med stark kontrast, färgen röd och kombinationen blå-röd.

Tips för att göra din media säkrare:

Lär dig mer om tillgänglighet

Ingen kan göra allt, men alla kan göra något! I dag finns det gott om verktyg som underlättar tillgänglighetsarbetet för dig som utvecklar mjukvara eller hemsidor. Här är ett urval:

Karl Berggren

Karl Berggren

2023-01-18