Hur man skapar tillgängliga webbplatser

Tillgänglighet innebär att webbplatsers och mobilapplikationers innehåll utformas på ett sätt som gör att alla kan använda dem på ett framgångsrikt sätt. Tillgänglighet är också en allt viktigare framgångsfaktor i utvecklingen av såväl digitala tjänster som av användarupplevelse.

Designerns och utvecklarens roll för tillgängliga digitala tjänster

När du designar en onlinetjänst är det viktigt att vara medveten om att tjänsten måste göras tillgänglig redan i koden. De som ingår i utvecklingsteamet måste förstå både varandra och slutanvändaren för att kunna förse tjänsten med allt från funktionella färgkontraster och responsiv textstorlek, till en tydlig semantisk kod som tillåter användning med tangentbord eller skärmläsare.

Det var just därför som vi, två digitala designers, bestämde oss för att delta i Frontend Master Web Accessibility-kursen, som handlar om grunderna för tillgänglighet i webbplatsimplementering. Föreläsningsdelen av kursen varar i cirka tre timmar, men vi bokade in en hel utbildningsdag så att vi kunde göra kursövningarna och kompletterande studier samtidigt. Vi fick också ut mycket mer av föreläsningsdelen då vi tog oss tid att diskutera ämnena, samt våra egna observationer och frågor. På Nitor värdesätts lärande – alla har möjlighet att lägga fem arbetsdagar om året på utbildning och förutom det lägger vi cirka tio procent av vår arbetstid på att utveckla våra egna interna projekt.

Grunderna i tillgänglighet

En webbplats tillgänglighet bygger på att även personer med funktionsnedsättning kan tolka, förstå och bidra till saker online, samt navigera och interagera på nätet. I början av kursen gav föreläsaren ett exempel på hur folk blev frustrerade över att deklarera sin skatt på nätet. Här i Norden är digitala skattetjänster för det mesta väldigt användarvänliga, men det var ändå lätt att identifiera sig med frustrationen. Det exemplet gjorde att vi fick ännu mer empati för människor som tycker att digitala tjänster är en utmaning.

Ungefär var femte person lever med någon slags funktionshinder. I USA har till exempel många människor nedsatt syn, trots att de bär glasögon. Detta leder till problem som svårigheter att tolka ord och bokstäver. Utöver syn- och hörselnedsättningar måste leverantörer av digitala tjänster även ta hänsyn till sådant som koncentrationssvårigheter, inlärningssvårigheter och fysiska funktionsnedsättningar, som gör det svårt eller till och med omöjligt att använda till exempel en mus.

Det finns många olika sätt att navigera på en webbplats. Några exempel: att använda ett tangentbord, en mus och ett virtuellt tangentbord på skärmen, eller att använda en muspinne eller en huvudmus som låter dig styra pekaren med huvudrörelser. Webbplatser designade för synskadade eller blinda användare blir tillgängliga tack vare en skärmläsare. För oss var det minst kända verktyget den så kallade ”single switchen”, där en enda tangent kan användas för att styra en dator.

När det gäller tillgänglighet är det viktigt att understryka att internet faktiskt utformades för att vara tillgängligt. Därför kan många tjänster som ser äldre ut vara ganska moderna, om man ser på dem ur den synvinkeln. Det är värt att komma ihåg att när en sida är designad för att vara tillgänglig är den lättare att använda för precis alla.

Vad vi lärde oss

Kursens upplägg bygger på att en föreläsning filmas i samband med en workshop, där ett ämne diskuteras följt av att man gör en praktisk uppgift relaterad till ämnet. Utöver uppgifterna används WebAim WCAG-checklistan. Nedan är några av de ämnen vi behandlade.

Ur en motorisk eller muskulär rörelsesynpunkt är det enklare att navigera med ett tangentbord.

Ett enkelt sätt att förbättra tillgängligheten för en webbplats att kolla på tangentbordsnavigeringen. När navigeringen är enkel, blir webbplatsen ofta mer begriplig för skärmläsaren också – eller egentligen för nästan vem som helst.

Hur fungerar då tangentbordsnavigering? När du surfar på internet med ett tangentbord flyttar tabbtangenten dig framåt, medan kombinationen tab + shift tar dig tillbaka till föregående element. Dessutom kan du dölja vissa element, som bara visas när webbplatsen nås med enbart ett tangentbord. Funktionen ”Hoppa till huvudinnehåll” är ett typiskt exempel på sådan planering och finns till exempel på 1177.se eller Myndigheten för samhällsskydd och beredskaps hemsida msb.se. Vissa tjänster, som sociala mediekanaler, använder också kortkommandon i navigeringen. Ett exempel är Twitter, som visar kortkommandon när du trycker på frågetecknet. Om din webbplats har kortkommandon bör du försöka informera användarna om dem så tidigt som möjligt. När du designar kortkommandon är det viktigt att du ser till att de inte är desamma som till exempel kortkommandon för datorns operativsystem.

Styr användarens uppmärksamhet åt rätt håll

De element som tabbtangenten eller skärmläsarens fokus ska riktas mot anges i koden. Vanligt textinnehåll inom en div räcker inte. Använd hellre element som hyperlänkar eller knappar. Tab-index-attributet kan till exempel användas för att ändra fokusordningen på innehållet, som till exempel “Hoppa till huvudinnehåll” här ovan.

Fokus måste också vara tydligt för en seende användare. Som standard ramar webbläsaren in själva innehållet. Tyvärr kan det här ibland glömmas om layouten på användargränssnittet är utformad utan att man ägnat tillräcklig uppmärksamhet åt själva tillgängligheten.

Skärmläsaren avslöjar webbplatsens funktionalitet

En skärmläsare läser upp webbplatsens innehåll för användaren. De som använder en Mac kan komma åt skärmläsaren direkt via systeminställningarna genom att slå på VoiceOver, utan att behöva ladda ner någon skärmläsarmjukvara. Windows-användare kan till exempel prova den kostnadsfria skärmläsaren NVDA.

Tillgängligheten för en webbplats, eller bristen på den, avslöjas ganska snabbt när man använder en skärmläsare. Användaren kan till exempel få problem med att använda och fylla i olika formulär om webbplatsen inte använder semantiskt korrekta HTML-element, eller om elementen är felaktigt namngivna.

Webbplatsens tillgänglighet kan förbättras med några små justeringar

Från allra första början designades som sagt internet för att vara just tillgängligt. Interaktiva komponenter så som hyperlänkar, knappar och inmatningsfält specificerades redan från början i koden. Det är smart att använda dem, alltså hänvisa till befintliga komponenter så som knappar, med deras egna HTML-kodsnippets. Att använda rätt komponenter gör också koden lättare att läsa.

ARIA-attribut kan användas för att förbättra till exempel instruktioner (aria-describedby) relaterade till webbplatsens komponenter eller för att instruera en skärmläsare att aktivt läsa upp högt vad som händer. De kan till exempel användas i samband med nedladdning av innehåll eller inlämning av ett formulär (aria live regions), på så sätt vet användaren vad som händer eller att ett val är gjort.

Bland utvecklarverktyg är till exempel VScode bra när det kommer till tillgänglighet, eftersom den kan fylla i ARIA-attribut automatiskt. Det snabbar upp processen och gör det lättare att använda i utvecklingsarbetet.

Verktyg

Det finns flera bra verktyg för att förbättra och utveckla tillgängligheten, och några av dem har vi nämnt i det här inlägget. Utöver dem som vi har gått igenom, hjälper till exempel NoCoffee plug-in för Google Chrome att illustrera olika visuella utmaningar, vilket gör det enkelt att arbeta med din egen siddesign. Chrome Vox är en annan skärmläsare, tillgänglig för Google Chrome, som låter dig ta del av webbinnehåll även om du inte kan läsa det själv.

Som du märker finns det många verktyg och mycket information om webbdesign där ute som kan hjälpa dig när du vill förbättra tillgängligheten.

Nitor har sedan en lång tid tillbaka levererat tjänster som är tillgänglighetsanpassade. De mest kända exemplen är finländska Andelsbankernas tillgängliga nätbankstjänst OP Tillgänglig och Helsingforsregionens Servicekarta. Tillgänglighetslagen som är en del av ett EU-direktiv trädde i kraft 2019 och kräver att offentliga myndigheters webbplatser och mobilapplikationer ska vara WCAG-tillgängliga.