Att ha en inkluderande och tillgänglig webbplats handlar i stort om att alla användare ska kunna använda webben oavsett förutsättning. Det är otroligt viktigt att alla individer kan ta del av samma information och bidra på samma villkor. Ibland måste vi till exempel använda en offentlig webbplats för att utföra ett ärende eller ta till oss en viss information. Då kan god tillgänglighet vara helt avgörande för att vi alla ska kunna lyckas. I denna artikel berättar våra tillgänglighetsexperter på Milou mer om tillgänglighet, inkluderande design och vad man behöver tänka på för att bli tillgänglig för alla. 

En rapport från WebAIM som undersöker tillgängligheten på en miljon startsidor visar att hela 95,9% har tillgänglighetsbrister. I denna artikel kommer vi gå igenom hur vi löser några av de vanligaste bristerna vi ser. 

 

Tillräckliga kontraster

En låg kontrast mellan text, grafiska element och bakgrund gör det svårt för personer med nedsatt syn att uppfatta sidans innehåll, men påverkar givetvis alla individer om text och annat blir svårläst. Har vi inte alla någon gång kisat och zoomat i telefonen för att lyckas se vad som står? 

Använd verktyg för att mäta kontrastförhållandet och säkerställ att texten har en tillräckligt hög kontrast. Ett bra gratisverktyg för att kontrollera detta är Colour Contrast Analyzer. Riktlinjer är att textfärg i normal storlek ska ha ett kontrastvärde på minst 4,5:1 mot bakgrundsfärgen, och färger på knappar och andra grafiska element ska ha ett kontrastvärde på minst 3:1 mot den omkringliggande färgen. 

 

Utforma formulär på rätt sätt

Det finns mycket att tänka på när det kommer till formulär, både ur ett rent tekniskt perspektiv, men också i hur de är visuellt utformade. 

Här listar vi några av de viktigaste delarna att tänka på:

• Ledtexter vid inputfältet: Användaren måste kunna förstå vad det är hen förväntas skriva i inputfältet. Lägg dock inte instruktionen i inputfältet, placera istället denna ovanför inputfältet. Lägg till hjälptext där det behövs och glöm inte att berätta vilka format som är tillåtna när det krävs särskild inmatning. 
• Obligatoriska fält: Markera obligatoriska fält så att det blir tydligt för användaren vad som måste fyllas i. Att endast skriva en asterisk (*) är inte tillräckligt, vi måste berätta vad asterisken betyder. 
• Validering och felmeddelanden: Tala om för användaren vad som händer, om något (och i så fall vad) har gått fel och hur det ska åtgärdas. 

 

Knappar och länkar

Ett vanligt förekommande problem vi ser är att man på en länk eller knapp skriver ”Läs mer”, eller ”länk” med en pil. Detta blir problematiskt både ur användarupplevelse-perspektivet men också för individer som använder skärmläsare då det inte beskrivs vad som händer när användaren klickar på länken/knappen. Beskriv i stället vad länken/knappen går till, till exempel ”Läs artikeln om tillgänglighetsdirektivet 2025”. 

Hur ska man tänka kring det här med knapp eller länk, när ska vilket användas egentligen? En bra tumregel är att länkar skickar användaren till en ny sida, och knappar triggar en annan typ av interaktion – till exempel att en sökning görs eller ett formulär öppnas. Knapp och länk har alltså olika syften. 

 

Responsivitet

Webbplatsen måste kunna anpassas till olika enheter och skärmstorlekar. Ur ett tillgänglighetsperspektiv ska användare också kunna zooma upp till 200% utan att funktionalitet och läsbarheten påverkas negativt. Tänk även på att klickytor ska vara tillräckliga, men inte heller för stora. Täcker klickytan en bild med länk hela skärmen på en mobil, är det lätt att användaren råkar klicka istället för att scrolla förbi. 

 

Typografi och rörliga element

Vi kan göra webbplatser hur snygga som helst, men om inte innehållet är bra spelar det ingen roll hur snygg den är. 

• Tänk på att skriva logiska och tydliga texter. Erbjud språkanpassning om det krävs och försök undvika att blanda olika språk på en och samma sida. I en svensk artikel läser en skärmläsare upp svenska ord och om det finns engelska ord kommer skärmläsaren läsa upp det engelska ordet på svenska vilket kan leda till förvirring för personen som får artikeln uppläst för sig. 
• Använd rätt rubriknivåer från början. Se till att det bara finns en (och bara en) H1:a överst på sidan, och att övriga rubriker följer en tydlig hierarkisk struktur och att rubriknivåer inte hoppas över. Detta är även viktigt ur ett SEO-perspektiv för att din webbplats ska ha en tydlig struktur så att Google kan indexera och förstå hur din webbplats hänger ihop. 
• Rörliga element kan förhöja upplevelsen och skapa en mer levande webbplats. Det är dock viktigt att tänka på att blinkningar, rörelser och andra visuella distraktioner ska kunna pausas eller stängas av för att personer ska kunna behålla koncentrationen och fokusera.

Summering 

Att jobba med tillgänglighet handlar inte bara om att följa de tillgänglighetskrav som finns; det handlar om att skapa en mer inkluderande digital tillvaro där alla individer kan ta del av samma information och bidra på samma villkor. 

 

Om du känner att du vill få bättre koll på tillgänglighet och behöver analysera din webbplats eller digitala tjänst, finns våra konsulter på Milou tillgängliga för dig. Besök deras webbplats här.