Gör din webbplats tillgänglig – tänk på dyslektiker och de med synproblem

Visst är det roligt med bilder som rör sig, texter som snurrar och automatisk skrollning i olika led. Men det vi ofta glömmer då är att en webbplats ska vara tillgänglig och inkluderande. Ytterligare en sak som jag tycker att man idag glömmer bort eller inte vet om är att diskrimineringslagen gäller även för webbplatser.

Diskrimineringslagen

På samma sätt som en arbetsplats, en butik och en myndighet ska vara tillgänglig för personer med funktionsnedsättning så ska en webbplats vara det. Samma sak gäller även de andra kriterierna i diskrimineringslagen som ålder, kön, etnicitet etc. Här brukar de flesta börja protestera lite och kanske med all rätt. En webbplats är såklart fullkomligt möjlig att besöka oavsett kön eller om du är rullstolsburen.

Men låt oss gå lite djupare i det här och då framförallt text och bild. Trenden går mot alltmer bildspel och video på webben och då behöver du också fundera lite på hur detta kan påverkar dina besökare. Är din besökare en ung datorvan besökare så kommer hen att snabbt hitta meny och knappar. Men hur är det med andra?

Vi kan börja med en liten enkel lista

1. Använd alltid alt-taggar till bilder
   Därför att en person med synproblem ska få information om vad bilderna på din hemsida visar
2. Det går att skala din hemsida
   Testa att zooma i din webbläsare med ctrl+ och ctrl-. Raderna ska inte bli så långa att du behöver skrolla i sidled
   Testa i din mobil genom att zooma med fingrarna. På en mobil så får du acceptera skrollning i sidled.
3. Det går att navigera med tangentbordet. Prova tab och shift+tab
   Kontrollera att det tydligt framgår var du hamnade med tab
   Även om du tycker att mus och musplatta fungerar utmärkt så gäller det inte alla.
4. Det är tydliga kontraster som gör text lättläst
   Svart text på vit eller ljusgul bakgrund är mest lättläst
   Okej, du gillar rosa och lila. Det går alldeles utmärkt att använda men inte på texten
5. Tydliga rubriker
   Om man har svårt med språket så är tydlighet viktigt och det gäller för de med synproblem, de med dyslexi och andra kognitiva hinder samt de som inte har svenska som första språk.
6. Tänk också på typsnitt
   Det spelar ingen egentlig roll vad du gillar för typsnitt. Frågan du vad dina besökare gillar!
7. Använd tydliga länkar
   Nej, ”klicka här” är ingen tydlig länk! Läs om kantareller – är en tydlig länk
8. Använd svenska
   Jag tror att det här är en av de saker som retar upp mig mest. ”Search this website”, ”Read more”, ”Published on”, ”Submit”. Det är dessa texter som visar att du struntar i dina besökare och att du inte ville lägga några hundralappar eller tid, på att få texter på svenska. Jag lämnar sådana webbplatser direkt!
   För personer med svårigheter att ta till sig innehåll på webben måste hoppande mellan språk vara en av de allra mest frustrerande sakerna.

Jag är lite raljerande i texten ovan och det beror nog på att jag för den här diskussionen med mina kunder ibland. De vill ha en ljusgrön sida för att det är deras favoritfärg. Enda gången som jag tycker att det är relevant är på en personlig blogg. I övrigt så handlar det om besökaren och inte om ens egna preferenser. Även utvecklare syndar och jag stöter ibland på utvecklare som har stängt av zoomning på mobiler för att kunna kontrollera layouten. Jag saknar ord för sådan dumhet!

Verktyg för att testa tillgänglighet

Det finns en hel del verktyg för att testa en hemsida med avseende på tillgänglighet. Testa gärna! Jag visar här resultatet för https://kobotolo.se

Tester av tillgänglighet

Europeisk test – tillgänglighet

Testen finns på http://checkers.eiii.eu/en/pagecheck/

Wave – emuleringstest – tillgänglig struktur

Testen finns på http://wave.webaim.org/

Här kan man både titta på en summering och se strukturen på webbplatsen. Strukturen visar hur hjälpmedel för en webbsida läser innehållet och hur du hamnar exempelvis med tab-tangententen. Den första informationen du får på KoBoToLo:s hemsida är ett val mellan att hoppa till huvudnavigering eller till innehåll, som du ser i bilden.

Test för färger med avseende på färgsvaga

En sida som tillhandahåller en enkel och smidig test för hur din sida ser ut för de med olika defekter i färgseende är https://www.toptal.com/designers/colorfilter.

Här ser ni hur wp-akuten ser ut för de med nedsatt förmåga för rött/grönt.