Digital tillgänglighet på webben

Digital tillgänglighet är en grundläggande del av design för webben. En hemsida som är anpassad för tillgänglighet gör användarupplevelsen bättre för alla och kan öka trafiken till en hemsida. I denna artikel berättar vi hur du kan se till att du har hög tillgänglighet på din hemsida och hur du kan följa Webbtillgänglighetsdirektivet.

Vad är digital tillgänglighet?

Att skapa en hemsida med digital tillgänglighet i åtanke, är att skapa en hemsida för alla. Det är en metod för att vara inkluderande och se till alla besökare kan ta del av samma innehåll. Med hög digital tillgänglighet förbättras användarupplevelsen för alla. Tillgänglighet på webben regleras i Sverige av Webbtillgänglighetsdirektivet, som vi kommer att återkomma till senare i denna artikel.

Fyra principer för tillgänglighet på webben

Det finns flera olika rekommendationer för hur hemsidor kan anpassas för hög digital tillgänglighet. Det finns en global standard som kallas WCAG 2.1 som sätter tydliga rekommendationer för hur hemsidor bör vara designade. I Sverige har Digg – Myndigheten för digital förvaltning skapat rekommendationer på svenska som baseras på WCAG 2.1. Det finns dessutom en svensk version av WCAG 2.0 som kan användas som hjälpmedel för att öka förståelsen för WCAG 2.1 på engelska.

Från WCAG 2.1 kan vi lära oss att digital tillgänglighet bygger på fyra principer:

• Möjlig att uppfatta
• Hanterbar
• Begriplig
• Robust

Nu ska vi gå igenom de fyra principerna för att förklara vad de innebär och hur du kan använda dem för att skapa en tillgänglighetsanpassad hemsida.

Möjlig att uppfatta

Den första principen kallas Perceivable på engelska och Möjlig att uppfatta på svenska. Det är en riktlinje som gör det tydligt att alla användare måste kunna förstå alla delar av en hemsida.

I praktiken betyder det till exempel att alla bilder måste beskrivas i text för att personer med nedsatt syn ska kunna uppfatta dem. På samma sätt måste texter som visas i en video också vara möjliga att höra och saker som sägs textas i undertexter.

För att vara tillgängliga måste alla texter skrivas med teckensnitt som är lätta att läsa och som har tillräcklig kontrast mot bakgrunden. Alla texter måste också vara tydligt synliga på alla typer av skärmar och skärmstorlekar.

Hanterbar

Principen Hanterbar kallas Operable i den engelska standarden och handlar om att alla funktioner på en hemsida måste vara möjliga att hantera och navigera. Med det menas att det måste finnas tillgänglighet för olika typer av styrenhet, såsom datormus och tangentbord. I regel ska alla delar av en hemsida vara tillgängliga med ett tangentbord.

För navigation är det viktigt att en hemsida är designad för att ha en enkel och logisk navigation. Alla sidor ska ha en tydlig titel som beskriver innehållet och alla länkar ska inkludera en text som gör det uppenbart vad syftet med länken är.

Begriplig

Begriplig eller Understandable är en princip som syftar till att göra all information på webben begriplig. Det kan handla om att vara tydlig med vilket språk en hemsida är skriven på och att språket är lätt att förstå. Det ska till exempel i regel finnas förenklade versioner av texter, om ursprungstexten använder ett språk som kräver en läsförmåga som överstiger högstadienivå.

Tydlig och enkel information inkluderar både tänkt information och felmeddelanden som är enkla att förstå. Syftet är att alla användare alltid ska ha möjlighet att förstå vad som står på hemsidan.

Robust

En hemsida med hög digital tillgänglighet är Robust. En hemsida som är robust har hög kompatibilitet och är designad för att fungera bra med alla mjukvaror och verktyg. För att lyckas med det är det viktigt att kontrollera att alla element av en hemsida är korrekt angivna. Alla HTML-taggar måste avslutas korrekt och alla attribut måste anges enligt rätt standard.

Syftet med denna princip är att garantera att de tre tidigare principerna inte störs av dåliga implementeringar. Om en hemsida inte fungerar som den ska har det ingen betydelse hur väl texten är skriven.

Varför är digital tillgänglighet viktigt?

Det finns många bra skäl att bry sig om digital tillgänglighet, allt från juridiska till ekonomiska. Vi ska gå igenom de största fördelarna med att prioritera tillgänglighet på webben.

Webbtillgänglighetsdirektivet

Digital tillgänglighet är ett lagkrav för många organisationer. Inom EU regleras digital tillgänglighet av Webbtillgänglighetsdirektivet och i Sverige finns Lagen om tillgänglighet till digital offentlig service, DOS-lagen. Dessa lagar reglerar digital tillgänglighet på webben och i mobila applikationer. Lagen kräver att alla statliga och kommunala myndigheter, regioner och offentligt styrda organ har hög digital tillgänglighet för all information. Lagen gäller dessutom vissa privata aktörer såsom skolor och sjukvårdsföretag.

Det finns vissa undantag för material som inte måste vara anpassat. Vissa typer av live-sändningar måste till exempel inte vara fullt tillgängliga men grundregeln är att allt innehåll ska vara tillgängligt för alla.

Webbtillgänglighetsdirektivet baseras på WCAG 2.1, vilket betyder att hemsidor som är anpassade för webbstandarden automatiskt följer lagstiftningen.

Bättre för alla

En tillgänglig hemsida är bättre för alla som använder den. Tydliga texter kan uppskattas av alla som kan läsa och videor med undertexter och tydligt tal kan uppskattas av alla. Hög digital tillgänglighet gör alltså alla hemsidor enklare att använda. Det ger en bra användarupplevelse som kan öka besökares förtroende för din hemsida och öka försäljningen för din webshop.

Ger fler besökare

När du skapar en hemsida som är inkluderande, öppnar du för en större marknad. Enligt EU har cirka 17 procent av befolkningen behov av digital tillgänglighetsanpassning. Det betyder att en hemsida som inte är anpassad riskerar att förlora en stor grupp potentiella besökare medan en anpassad hemsida kan gynnas. Det finns därför ekonomiska argument för att investera i en tillgänglig hemsida.

Kontrollera din digitala tillgänglighet

Det finns en mängd olika metoder och verktyg du kan använda för att skapa en hemsida med hög digital tillgänglighet. Här är några exempel:

Automatiserade testverktyg

Det finns automatiserade verktyg som kan hjälpa dig analysera både hela hemsidor och enstaka sidor. Ett kostnadsfritt verktyg är accessMonitor som är utvecklat av en myndighet i Portugal. Verktyget använder WCAG 2.1 och är alltså helt kompatibelt med svensk lagstiftning. Ett mer kraftfullt alternativ är axe DevTools som också erbjuder tester av mobilappar.

Testa manuellt

När du bygger din hemsida är det viktigt att testa den och leta efter fel. Var kritisk och fundera på om dina rubriker, sidtitlar, knappar och texter är logiska och enkla att läsa. Fundera på om du kan förenkla ditt språk för att göra din hemsida mer tillgänglig.

Ett manuellt test kan vara ett bra komplement till ett automatiserat testverktyg eftersom testverktyg kan ha svårt att upptäcka språkliga och logiska misstag du har gjort på din hemsida.

Användartester

De personer som är bäst på att testa tillgänglighet på webben är de personer som har störst behov av det. Om du känner någon som använder en skärmläsare eller som har andra behov, kan du låta dem testa din hemsida. Studera hur enkelt de tycker att det är att navigera, slutföra köp och hitta viktig information på din hemsida. Använd sedan denna feedback för att förbättra hemsidans design och struktur.

Kom ihåg att din hemsida aldrig blir helt klar. Du kan alltid förbättra den och skapa nya möjligheter för fler att delta. Lyssna på dina besökare och fundera aktivt på vad du kan göra för att vara mer inkluderande.

4 enkla förbättringar du kan göra

Om du inte har arbetat med digital tillgänglighet tidigare, finns det sannolikt mycket du kan göra för att förbättra din hemsida. Vi har samlat fyra enkla tips för att skapa en bättre hemsida.

Färg och kontrast

Det är viktigt att alla texter och alla synliga objekt på din hemsida har god kontrast. Det betyder att alla texter måste sticka ut och vara enkla att läsa, även av personer med nedsatt syn eller till exempel färgblindhet. WCAG 2.1 rekommenderar en kontrast på 4,5:1, vilket betyder att texten ska vara 4,5 gånger så mörk eller ljus som bakgrunden. För små texter och designelement kan det vara bra att ha ännu högre kontrast, 7:1 är rekommenderat. Du behöver inte använda en helt svart text på en vit bakgrund men det är viktigt att ha god kontrast. Om du vill testa färgers relativa kontrast kan du använda ett testverktyg från WebAIM.

När du ökar kontrasten på din hemsida blir din hemsida lättare att använda för alla. Det gör din den bättre och dina besökare nöjdare. Eftersom sökmotorer såsom Google vill länka till bra hemsidor, kan kontrasten och tillgängligheten av en sida påverka hur sidan rankas.

Alt-text

En alt-text är en kort beskrivande text som används tillsammans med bilder. Det är en text som normalt inte är synlig för användare men som kan visas om bilden saknas eller inte kan laddas. För digital tillgänglighet används också alt-texter av skärmläsare för att beskriva en bild som användaren inte kan se.

Alt-texter är en del av din sökmotoroptimering eftersom alt-texter kan användas av sökmotorer för att utvärdera om en sida inkluderar relevanta bilder. Sidor som helt saknar alt-texter kan få en sämre ranking eftersom det påverkar tillgängligheten för sidan.

Knappar och CTA

När en besökare kommer till din hemsida vill du sannolikt konvertera den till en återkommande besökare eller kund. Det kan du göra genom att be dem skriva upp sig på ett nyhetsbrev, läsa fler artiklar eller köpa en produkt med en CTA-knapp, Call to Action-knapp. CTA-knappen behöver vara enkel att se, läsa och klicka på för att fungera. Här är några tips på hur du kan skapa bra CTA-knappar:

• Beskrivande text: Alla knappar måste ha en text som tydligt beskriver vad den har för syfte. Använd aldrig en knapp som det står ”Klicka här” på. Alla knappar måste ha ett tydligt syfte. Ett bra exempel kan vara ”Lägg till i varukorgen” eller ”Betala”. Med tydliga texter blir det enkelt för alla användare att förstå vad en knapp gör och vart den leder.
• Responsiv design för zoom: En responsiv design gör din hemsida väl anpassad för mobila användare. Den kan också vara bra för ökad tillgänglighet. Se till att din hemsida ser bra ut och att den fungerar som tänkt när zoom-funktionen i webbläsaren används.

Ha undertexter till videor

Om du har videor eller ljudklipp på din hemsida är det viktigt att inkludera manus eller undertexter för att göra innehållet tillgängligt. En bonus är att texter från videor kan förbättra hur de indexeras och rankas av sökmotorer.

Sammanfattning: funktion framför form

Det går att skapa snygga hemsidor som har hög digital tillgänglighet. En duktig designer kan jobba runt de begränsningar och den funktionalitet som krävs för att skapa hög webbtillgänglighet. Även om det skulle krävas vissa designkompromisser är det viktigt att komma ihåg att tillgänglighet förbättrar användarupplevelsen för alla användare.

Tillgänglighet är bra för din hemsida!

Tillgänglighet på webben är ett lagkrav enligt Webbtillgänglighetsdirektivet men det är också bra för ditt företag eftersom det öppnar en marknad med 18 procent av befolkningen som har särskilda behov av tillgänglighet. Digital tillgänglighet ger dessutom fördelar för alla besökare eftersom det gör din hemsida enklare att använda och det kan ge positiva ekonomiska effekter, utöver att det bidrar till en mer inkluderande värld.