Alla vinner på att tänka tillgängligt

”Tillgänglighet, det är väl sånt där för blinda”, säger någon med en illa dold gäspning. En annan svarar ”jag tror det är när man skriver alternativtext?” Nja, inte riktigt, för mig handlar det mer om att vara med och skapa ett samhälle där alla kan delta på lika villkor – oavsett olika individuella förutsättningar.

Okej, det låter ju som fina ord. Men skapar det något affärsvärde, och varför ska just du bry dig om att ta fram en webbplats eller tjänst som är bra för alla?

Minst 20 procent av dina användare

Visste du att tillgänglighet är viktigt för ungefär en femtedel av internetanvändarna? Och egentligen är siffran ännu högre, eftersom alla människor kan ha särskilda behov vid vissa tillfällen.

Du är kanske trött, stressad och har huvudvärk – vilket tillfälligt tar ner din kognitiva förmåga. Du kan ha brutit handleden under senaste skidsemestern, vilket gör att du inte kan navigera på webben på samma sätt som du brukar. Eller sitter du på en skakig buss och har svårare för att klicka på små ytor. De flesta av oss drabbas också av att synen blir svagare med åldern. Med andra ord, en tillgänglig webbplats, är en webbplats som är bra för alla.

Fem lönsamma skäl för att tänka tillgängligt:

  • Det är bra för dina affärer om du kan nå ut till många fler.
  • Genom att se till att din digitala tjänst är tillgänglig, visar du att du är mån om alla dina användare. Det är bra för varumärket att välkomna alla.
  • Du följer lagen. Sedan den 1 januari 2015 är det lagkrav på att alla webbplatser är tillgängliga, alltså inte endast inom offentligheten. Att satsa på tillgänglighet är alltså en framtidsinvestering så att du slipper tvingas göra om.
  • Det är inte särskilt dyrt.
  • Sökmotorer gillar tillgängliga webbplatser.

Kom igång med tillgänglighet

En tillgänglig webbplats ska ha en tydlig struktur. Det gäller både för koden bakom och för innehållet som syns utåt. Se därför till att både utvecklare och redaktörer är insatta i vad de behöver tänka på. Ta med tillgänglighet redan från början i era projekt. Om du är beställare, se till att det kommer med i kontraktet.

När du vill ta fram en webbplats som är öppen för alla användare, ska du ta hänsyn till att människor kan ha olika förmågor när det gäller:

  • Syn (Exempel: färgblindhet, synskada.)
  • Hörsel (Exempel: svårighet med att uppfatta ljud)
  • Motorik (Exempel: problem med att röra sig, skakningar.)
  • Kognition (Exempel: svårt att uppfatta och ta in information, minnessvårigheter.)

Se till att användaren själv har kontroll över webbplatsen

  • Det ska gå att ändra färger, förstora text och att välja ifall man vill öppna länkar i nytt fönster, eller inte.
  • Undvik rörliga objekt som poppar upp på sidan (jobbigt för epileptiker och människor med kognitiva svårigheter).
  • Om du har publicerat ett videoklipp, se till att det inte startar av sig själv.

Webbplatsen ska vara lätt att navigera och hitta tillbaka på

  • Se till att det finns alternativa vägar, till exempel brödsmulestig. Det ska alltid vara klart för användaren var hen befinner sig.
  • Se till att det går att navigera på webbsidorna även utan mus. För att det ska fungera måste du se till att objekten på sidan följer en logisk tabb-ordning och att det går att navigera med tabb, enter, mellanslag och piltangenter. Det ska vara tydligt vilka element på webbsidan som har fokus när man navigerar med hjälp av tangentbordet.

Koden måste vara rätt

  • Många synskadade använder skärmläsare när de surfar. Därför är det viktigt att en maskin ska kunna förstå vad som är huvudrubrik, underrubrik, lista, länk, typ av tabellcell och så vidare. Formulärfält ska märkas upp med tydliga etiketter.
  • Se till att lang-attributet stämmer med det språk som texten är skriven på. Har du citat på annat språk inne i texten måste det också märkas upp så att användaren får texten uppläst med rätt uttal.
  • Kontrollera så att koden på dina webbsidor är korrekt med hjälp av W3C:S verktyg.

Skriv begripligt, märk upp och strukturera ditt innehåll

  • Strukturera texten och använd rätt format för olika slags rubriker, stycken och listor. Märk upp vad som är rubrik- respektive datacell om du har en tabell.
  • Man ska enkelt kunna förstå vad som är en länk, och vart länken leder. Skriv tydliga länkar som kan läsas och förstås även utanför sitt sammanhang. Användaren ska kunna förutse vad som händer när hen klickar på länken. Öppnas en pdf-fil? Kommer man direkt till ett videoklipp?

Se till att det finns textalternativ till innehåll som inte består av text

  • Alla bilder ska ha ett alt-attribut. Bilder som innehåller kommunikativt värde ska ha alternativtext. Ifall bilden bara är till för dekoration ska värdet på alt-attributet lämnas tomt (alt=””).
  • Infografik och diagram förses med textalternativ.
  • Om du använder video eller ljud, se till att texta och/eller ta fram transkriptioner.
  • Undvik Captcha, men om ni måste använda det – se till att det finns alternativ. Nu går det inte att ha textalternativ just i det här fallet, eftersom det skull motverka syftet, men det finns andra varianter som till exempel ljud-captcha.

Alla uppfattar inte färger på samma sätt

  • Kolla kontraster och färgkombinationer så att färgblinda användare inte missar viktigt innehåll.
  • Förlita dig inte enbart på färg för att kommunicera och särskilja innehåll. Till exempel bör länkar få ett understreck vid ”mouseover” så att användare som inte ser alla färger också kan förstå att texten är länkad.

Finns det formulär på webbplatsen?

  • Se till att dina formulärfält har etiketter som tydligt visar vad användaren ska skriva i varje fält.
  • Använd så kallade förlåtande formulär, som ger inmatningshjälp. Var också tydlig när du förklarar för användaren varför det blir fel när hen matat in information i formuläret.
  • Om du har ett formulär som kräver att användaren ska hinna fylla i det under en viss tid måste du ge användaren möjlighet att förlänga tiden innan time-out.

Nu har du fått lite koll på vad du behöver veta för att tänka tillgängligt. Det här inlägget är vårt bidrag i samband med den internationella dagen för ökad medvetenhet om tillgänglighet (Global Accessibility Awareness Day). Ett initiativ som går ut på att att göra folk mer medvetna om digital tillgänglighet.

/Åsa Holmberg, webbredaktör

 

Länktips för dig som vill lära dig mer:

Publicerad: Taggar: affärsnytta beställare skärmläsare tillgänglighet utveckling

Koda med stil – så jobbar vi med styleguides

Minns du de första HTML-sidorna? Grå bakgrund, animerade gif-bilder och text skriven med Times New Roman. På den tiden var det relativt okomplicerat att hantera design – idag använder vi andra metoder för att utveckla gränssnitt där styleguides är en del.

En styleguide är ett levande dokument med riktlinjer för bland annat färger, typografi, mönster, tabeller och andra element – som tillsammans utgör en design.

Styleguides har många fördelar

Det handlar inte om ett dokument i traditionell mening, utan snarare en enkel webbsida med färdiga implementationer av alla delar som den färdiga webbplatsen sedan använder. Där definieras allt från det rutnät som styr layouten för varje enskild sida – till sådant som typsnitt, rubrikstorlekar, färger och andra grafiska element. Guiden berättar också hur de olika elementen ska hanteras i olika skärmstorlekar.

För våra designers betyder det att alla delar av webbplatsen går att granska och justera så fort guiden är färdig. För våra utvecklare blir guiden en plats där alla tillgängliga delar finns färdiga att implementera på webbplatsen. Ytterligare en fördel är att kunderna också får tillgång till guiden vilket gör att de redan tidigt kan följa hur webbplatsen byggs upp.

Begreppet styleguide blandas ibland ihop med det som kallas för grafisk profil, men det är två helt olika saker. Skillnaden är att den grafiska profilen används under designfasen, medan styleguiden är en konkret implementering av den färdiga designen.

Så tar vi fram en styleguide

Antingen utgår vi från en redan befintlig webbplats, eller också från design och sidstruktur för en helt ny webbplats. Målet i båda fallen är att identifiera samtliga enskilda element och kombinationer av element och därefter namnge och kategorisera dem.

Vi börjar med färger och typsnitt, för att sedan gå vidare till enklare grafiska element som till exempel knappar, ikoner och inmatningsfält. När vi är klara med det är det dags att placera in elementen i de olika sammanhang och kombinationer som de ska finnas i.

styleguidesC9-2

Utifrån de identifierade elementen och sidans rutnät tar en gränssnittsutvecklare hand om att implementera allting och ser till att varje enskild del går lätt att lyfta ut och sätta in i sitt rätta sammanhang. Slutligen implementerar utvecklarna eventuella interaktioner och animationer som sker i gränssnittet.

Styleguides är en investering för framtiden

Du kanske tänker att det är mycket arbete med att gå igenom en sådan här process inför ett projekt. Varför inte bara fokusera direkt på att bygga webbsidorna? Det finns många anledningar till att ta fram styleguides och utöver de som vi redan varit inne på, tycker vi att de här är extra viktiga:

  • Det blir lättare för front-end-utvecklaren att implementera nya sidor och funktioner eftersom alla tillgängliga delar finns definierade i guiden.
  • Vi kan snabbt testa nya varianter av disposition och layout.
  • Nya utvecklare kommer snabbt in i projekt – något som sparar både tid och pengar.
  • Guiden och webbplatsen kan dela samma stilmallar, vilket betyder att ändringar i guiden också slår igenom på webbplatsen.
  • Att skapa och upprätthålla en styleguide är dessutom en framtidsinvestering, då förändringar och nyutveckling blir betydligt lättare att genomföra.

/Ronnie Hillgren, systemutvecklare och Jesper Andersen, art director

Läs mer på Creating Style Guides

Publicerad: Taggar: frontend styleguide UX webbdesign webdesign

Min praktik på Cloud Nine

Lärorikt, intressant och väldigt socialt. Det säger Michael Melbing om sin tid som praktikant hos oss på Cloud Nine.

Under Michaels fyra månader långa praktik har han suttit tillsammans med ett utvecklarteam och varit en del i arbetet med ett stort kundprojekt. Han jobbar i nära samarbete med tre andra utvecklare och har dagliga avstämningar med både kunden och teamet.

Michael tycker att han lär sig mycket av att få vara med hela vägen i arbetet med att ta fram nya webbaserade system.

– Jag har fått inblick i hur det går till, allt ifrån att gå igenom kundens önskemål och uppskatta hur lång tid det kommer ta, till att utveckla, testa och lansera de nya systemen i både produktions- och livemiljö.

Kunden som Michaels team arbetade med har flera olika system, vilket gör arbetet varierande. Han har också lärt sig hur man arbetar med Git och TFS, två vanliga versionshanteringssystem.

Förutom intressanta och spännande arbetsuppgifter uppskattar Michael den sociala stämningen på kontoret. Luncherna är aldrig tråkiga och det finns alltid någon trevlig kollega att prata med.

– Det är vanligt att några spelar pingis eller Xbox under lunchen. Alla som vill är välkomna att haka på, säger Michael.

Han avslutar med att säga att han är supernöjd med sin praktik på Cloud Nine eftersom han känner sig varmt mottagen, lär sig massor och får ett otroligt bra stöd från medarbetarna.


Innan Michael var helt färdig med sin praktik fick han ett erbjudande om anställning hos Cloud Nine, som han tackade ja till.

Vill du också praktisera hos oss?

Vi erbjuder praktik både höst och vår. Läs mer på vår sida med lediga jobb.

Publicerad: Taggar: arbete cloudnine praktik praktikant

Sluta gissa och våga ha fel

I veckan som gått var jag på From Business to Buttons, en årlig konferens för alla som arbetar med UX, user experience. Alla talare var mycket kunniga och intressanta att lyssna på. Men jag fick särskilt upp ögonen för Cindy Alvarez som pratade om så kallad hypotesdriven design.

Så hur funkar det där med hypotesdriven design? Alvarez beskriver det så här: Designern börjar med att skriva ner en möjlig förklaring på ett problem, en hypotes, som testas och formuleras om tills man hittar en bra lösning.

Som exempel tog Alvarez upp när hon och teamet ville ta reda på varför deras användare inte använde sökfunktionen. För att lösa problemet tog de fram en hypotes:

  • Vi tror att användarna inte ser sökfunktionen.
  • Det leder till att de inte söker.
  • Om vi gör sökfunktionen mer synlig,
  • kommer fler användare börja använda den.

De försökte först öka synligheten genom att ändra färg på sökfältet. Det ledde till några få extra sökningar, men det var uppenbart att det inte var synligheten som var grundproblemet. Därför gick teamet vidare med en ny, mer kvalificerad, hypotes och fortsatte på samma sätt tills problemet var löst. Det visade sig till slut att användarna inte ville söka eftersom de var rädda för att andra kunde se vad de hade sökt på. Så det som började med att byta färg på sökfältet, slutade med att hela systemet behövde göras om.

Den första hypotesen är en ren chansning, men vi måste ställa den för att få fram fler hypoteser – som i sin tur blir alltmer kvalificerade gissningar. Men, det vi främst måste göra med våra hypoteser är att avfärda (falsifiera) dem!

Being right is a temporary condition.

Cindy Alvarez

Bara för att något fungerade en gång, behöver det inte vara lösningen på alla liknande problem. Hon betonade också hur viktigt det är att erkänna att man kan ha – och har fel.

För att användaren ska få den bästa upplevelsen, är det viktigt att inse att hypotesen kanske inte stämmer och kunna vända ett misslyckande till sin fördel. Det är alltså viktigt att vara självkritisk vid alla användarundersökningar.

Etisk design lyfts fram

En annan sak som jag tar med mig från dagen är att etisk design kommer bli viktigt i framtiden. Mike Monteiro, har sagt det tidigare, och nu på konferensen tog Avi Itzkovitch upp det igen:

[Designers are] the ethical gatekeepers of technology.

Var ligger designerns etiska ansvar? Är det meningen att de ska göra allt utan att ifrågasätta? Var går gränserna, och när passerar man dem? Allt man gör påverkar världen, säger Itzkovitch, och om man känner sig obekväm med något; gör det inte!

Alla som arbetar med design måste fortsätta att vara kritiska – att göra etiska val ska vara en självklarhet. Det tror jag är framtiden.

/Matilda Björnram, interaktionsdesigner

Omnämnda talare
Cindy Alvarez, Director of user experience på sociala nätverket Yammer, @cindyalvarez
Mike Monteiro, Design director på Mule design studio
Avi Itzkovitch, Internet of things UX designer, grundare UX Salon

Mer om konferensen From Business to Buttons
Cindy Alvarez intervjuas på UXpodcast

Publicerad: Taggar: konferens UX

Den uppochnervända världen

När e-handeln började ta plats i vår vardag handlade det mycket om att utforma digitala interaktioner och upplevelser som påminde om den fysiska verkligheten och gav oss den trygghet vi behövde genom att härma fysiska butiker och den förmodat bättre kundupplevelsen. Även på andra sätt försökte det digitala likna den fysiska världen (ni kommer ihåg Apples skeumorfiska gränssnitt som såg ut som anteckningsböcker etc – nu är det platt design som gäller). Det stora dilemmat var bristen på flexibilitet i digitala interaktioner – skulle man beställa något online fanns det ett i förväg definierat flöde (så är det oftast fortfarande, men sök/filtertekniken gör shoppingupplevelsen lättare att anpassa till individens preferenser). En säljare i en butik där du handlat tidigare lär sig ju vad du tycker om, vad du heter, kan tolka din sinnesstämning och släta över brister i produkter eller sortiment.

Men nu har tekniken kommit längre. Din facebookprofil, pinterestsida, twitterfeed, position, kroppstemperatur, puls och sinnesstämning blir snart tillgänglig för alla (eller de du har en kundrelation till) – och konsekvensen blir att den fysiska retailbranschen behöver anpassa sig och bli lika personlig som den digitala håller på att bli. Personalisering var det stora buzzwordet 2014 och trenden mattas knappast av i år. Apple Watch, beacons, nya mobila e-handelsplattformar som är mer intelligenta, självsegmenterande och flexibla än tidigare och kontaktlös betalning är bara några ingredienser i en teknikmix som de fysiska återförsäljarna måste anpassa sig till. Dagens digitala konsument kräver det. Och många av de större kedjorna har redan kommit långt med en anpassning till tillgängliga kunddata och ökade krav på relevans. Så snart kommer du kanske inte bara få veta via ditt smarta kylskåp och mobilen att mjölken är slut, utan även få extrapris på mjölk i livsmedelsbutiken när du går in. Och personal shopper-uppmärksamhet i varuhuset utan inledande intervju. Denna förbättrade service kanske kan få big data att kännas som något som är på konsumentens sida och inte bara på marknadsförarens…

/David Aler, strateg

Publicerad: Taggar: E-commerce kommunikation Köpprocess kunder Strategi User Experience