Person trykker på Google for at søge på noget | Novicell, Digitalt konsulenthus

Tillgänglighet på internet

Bra användarupplevelser för alla!

Webbtillgänglighet handlar om bra användarupplevelser

Webbtillgängligheten handlar om användarupplevelsen. Användarna har olika förutsättningar för att använda en webbplats, och för en del av befolkningen kan den digitala upplevelsen vara utmanande . En användare kan till exempel ha en permanent nedsatt syn, vilket gör att användaren behöver hjälp att "se" en webbplats. Ett annat exempel är en användare som har stress, och därmed tillfälligt utmanas kognitivt i sin resa på en webbplats. Med en tillgänglig webbdesign kan ni hjälpa alla era användare på er webbplats.

Novicell stärker webbtillgängligheten för både offentliga och privata organisationer

Hos Novicell är vi experter på webbtillgänglighet, och vi jobbar med det eftersom det är vettigt att designa webbplatser som kan användas av alla. Samtidigt vet vi att användarupplevelse, trafik och prestanda är nära besläktade med webbtillgänglighet, och de är alla avgörande faktorer för om en webbplats fungerar som den ska. Vi förstår varför webbtillgänglighet är viktigt och vi vet hur man gör tillgängliga webbplatser.

Därför bör ni välja Novicell som affärspartner

Tester

Tillgänglighetstester av befintliga webbsidor.
Rådgivning

Rådgivning om tillgänglighet.
Utveckling

Utveckling av tillgängliga webbsidor.
Utbildning

Utbildning av webbredaktörer.
Serviceavtal

Serviceavtal gällande webbtillgänglighet.

Checklista för den som arbetar med webbtillgänglighet som redaktör

Formatera texten korrekt

• Använd H1, H2, H3, punkter, numrering och annan formatering för att göra sidorna lätta att se och skanna.
Läsbarhet

• Skriv korta och enkla meningar. • Använd rubriker och underrubriker för att skapa struktur och mening i texterna.
URL och taggar

• Ge alla sidor en meningsfull titel och beskrivning så att det enkelt kan avkodas vad sidan handlar om. • Se till att alla webbadresser på webbplatsen har en meningsfull titel.
Länkar

• Undvik länkar med titlar som "Läs mer" eller "Se här". • Håll beskrivande länktexter till 100 tecken eller mindre.
Instruktioner

• Skapa inte instruktioner enbart baserade på position på sidan.
Bilder

• Ge bilder en beskrivande och meningsfull alt-text, som förklarar bilden för till exempel blinda och synskadade. • Undvik text på bilder, eftersom den inte kan läsas av till exempel en digital assistent.
Video och ljud

• Gör transkriptioner av video och ljud på er webbplats. • Se till att alla videor har undertexter.
Dokument

• Se till att inställningarna är korrekta i t.ex. Word eller InDesign innan ni exporterar till PDF. • Kontrollera att PDF:en inte är låst på ett sätt som förhindrar till exempel en skärmläsare från att kunna återge den till en användare.

Vilka problem löser webbtillgänglighet?

1 av 5 personer utmaningar digitalt och därför är det bra att arbeta med webbtillgänglighet. Offentliga organisationer måste se till att alla har tillgång till sina webbplatser och privata företag har stora vinster att göra genom att göra sina webbplatser tillgängliga. När er webbplats uppfyller kraven på webbtillgänglighet är det inte bara en fördel för de upp till 20 % som lever med en funktionsnedsättning, det är till fördel för alla era besökare. Och det finns många fördelar att dra nytta av i arbetet med webbtillgänglighet.

Hög webbtillgänglighet ger:

Användarupplevelse

Bättre användarupplevelse.
Ökar trafiken

Ökar webbplatstrafiken som en följd av bättre placeringar i sökmotorerna.
Fler konverteringar

Ökade konverteringsfrekvenser.
Prestanda

Ökad prestanda.
Ökad självbetjäning

Högre andel självbetjäningsanvändare jämfört med telefon- och e-post.

WCAG (Web Content Accessibility Guidelines) checklista för designern

Semantisk struktur

• Se till att all design och innehåll följer en logisk semantisk struktur. • Var medveten om att läsordningen måste vara densamma som den visuella ordningen på sidan.
Färger och kontrast

• Säkerställ tillräcklig kontrast mellan förgrund och bakgrund. • Förgrundstext måste ha tillräcklig kontrast med bakgrundsfärgerna. Den innehåller text på bilder, bakgrundsgradienter, knappar och andra element.
Text och typsnitt

• Använd riktig text istället för grafisk text, eftersom den kan läsas av skärmläsare och kan förstoras mycket bättre. • Använd alltid CSS för styling.
Linjelängd

• Undvik för långa eller för korta rader, eftersom det minskar läsbarheten. • Den optimala radlängden för brödtext är mellan 50-60 tecken per linje.
Länkar

• Se till att länkarna sticker ut visuellt på andra sätt än vid att bara använda färg. • Designindikatorer som gör det enkelt för tangentbordsanvändare att avgöra om något är en länk.
Animation, video och ljud

• Uppmärksamma bild- och mediaalternativ i er design. • Undvik blinkande animationer och automatiskt uppspelat innehåll.
Fält och formulär

• Se till att inmatningsfält och formulär har beskrivande etiketter och instruktioner. • Visa alltid valideringsfel, felmeddelanden och ge användaren instruktioner för att korrigera eventuella fel.
Interaktiva element

• Gör det enkelt att identifiera interaktiva elektriska element som länkar och knappar. • Se till att stilar och namngivning av interaktiva element används konsekvent på hela webbplatsen.
Navigering

• Gör det enkelt att navigera över webbplatsen på mer än ett sätt. • Erbjud till exempel en webbplatssökning och en webbplatskarta. • Hjälp användare att förstå var de är på webbplatsens sidor genom att tillhandahålla orienteringsmarkörer som länkstigar och tydliga rubriker.

Guide till de bästa WCAG-verktygen

Det finns ett brett utbud av verktyg som kan hjälpa er i ert arbete med webbtillgänglighet. Detta är för dem som arbetar med utveckling, innehåll och/eller design - vi har samlat det bästa på denna sida. Ni bör dock vara medvetna om att de automatiserade verktygen för att till exempel kontrollera WCAG-efterlevnad endast hittar ca. 30 % av de utmaningar som kan finnas omkring tillgängligheten på er webbplats. Därför bör de automatiserade verktygen alltid kompletteras med en kvalitativ och strukturerad granskning.

Siteimprove Accessibility Checker

Ett enkelt plugin för Chrome. Stå på sidan ni vill kontrollera och klicka på ikonen i verktygsfältet. Då får ni en överblick över problemen med webbtillgänglighet som verktyget har upptäckt uppdelat på uppgifter för redaktör, webbmaster, designer respektive utvecklare.
WAVE Web Accessibility Evaluation Tool

En rad verktyg som hjälper er att utvärdera tillgängligheten för er webbplats och ger er en visuell överblick över de områden på er webbplats som inte är tillgängliga.
ChromeLens

Plugin för Chrome som består av verktygen Lens och TabTracker. Lens är en visuell simulator som låter er uppleva er webbplats som om du var blind eller delvis blind. Med TabTracker kan ni testa om er webbplats navigering endast kan nås med hjälp av tangentbordet.
Contrast Checker

Med Contrast Checker kan ni enkelt testa kontrastförhållandet mellan bakgrundsfärgen och förgrundsfärgen på er webbplats.
Check my links

Chrome-tillägg som kontrollerar er webbsida för döda eller tomma länkar.
YouTube

Lägg enkelt till undertexter till era videor via YouTube.
The A11 Project

En användardriven community där ni kan hitta massor av praktiska guider, artiklar och tips för att testa innehåll.
Acrobat Pro

Acrobat-verktyget gör det enkelt att skapa tillgängliga PDF-filer och kontrollera tillgängligheten för befintliga PDF-filer.
ChromeVox

Chrome webbläsartillägg som är lätt att installera och låter er snabbt och enkelt testa skärmläsning på er webbplats.
Color safe

Hitta tillgängliga färgpaletter baserade på WCAG-riktlinjer för text- och bakgrundskontrast- förhållanden.
Color Contrast Analyzer

Color Contrast Analyzer (CCA) hjälper er att besluta textens läsbarhet och kontrasten hos visuella element som grafik och visuella indikatorer.
Link contrast checker

Använd detta verktyg till att kontrollera att kontrasten mellan länkfärg och teckensnittsfärg är korrekt.