Tillgänglighet

Inkluderande design – Checklista för att skapa en webb som kan användas av alla

I mitt arbete med stora webbplatser med hög servicenivå som t ex myndigheter, tjänsteföretag, e-handlar, försäkringsbolag och mediahus stöter jag ofta på patrull när det kommer till tillgänglighet. De flesta verkar tycka att det känns krångligt och kostnadsdrivande. Vilket det inte alls behöver vara!

Att skapa en tillgänglig webbplats som kan användas av alla personer oavsett förutsättningar och funktionssvårigheter är inte speciellt avancerat. Det handlar till största delen om en inställning till användarna – dina besökare.

Vinsterna med en tillgänglig webb skulle jag våga påstå är enorma! Du kommer att öka dina affärer, kundnöjdhet, förbättra upplevelsen och dessutom få high five av både designers och utvecklare. Dessutom följer du då den uppdaterade lagen om tillgänglighet vilket ju är en fin bieffekt om något.

Nedan följer en checklista för att skapa en tillgänglig webbplats – en inkluderande webbplats som har goda förutsättningar att kunna användas och uppskattas av alla som besöker den.

Sprid och dela gärna checklistan. Sharing is caring!

CHECKLISTA FÖR ATT SKAPA EN TILLGÄNGLIG WEBBPLATS

UTFORMNING AV ANVÄNDARGRÄNSSNITT – ÄNDAMÅLSENLIGHET OCH EFFEKTIVITET

  • Bara motiverad och relevant information presenteras
  • Information presenteras utifrån relevans, oftast efterfrågad information först på sidan
  • Om en uppgift måste delas upp på två sidor klarar sig användaren i så många fall som möjligt på de uppgifter som finns på första sidan
  • Den viktigaste informationen syns tydligt
  • Relevant information i sammanhanget döljs inte av andra fönster
  • Element och upprepningar som inte tillför någon information förekommer inte
  • Det finns inga onödiga dekorationer eller ramar
  • Information är alltid placerad på samma ställe och stöder mönsterigenkänning och automatisering
  • Bara ord och koncept som användaren är väl förtrogen med används
  • Gränssnittselement har sina givna positioner på skärmen
  • Centrala uppgifter kan utföras snabbt och smidigt
  • Applikationen är självförklarande
  • Användaren får stöd för inmatning när det är lämpligt, till exempel genom förvalda värden

UTFORMNING AV NAVIGERING

  • Användaren ser hela tiden var hen befinner sig
  • Aktuell sida är markerad i menyn
  • Menyn ser likadan ut hela tiden
  • Menyval är tydliga och konsekvent namnsatta
  • Vid sidväxlingar hamnar fokus överst på sidan om den går att rulla
  • Fasta sidbrytningar används om information delas upp på flera sidor
  • Nya fönster används sparsamt
  • Länkar till sidor utanför systemet öppnas i nytt fönster

UNDVIKA FEL

  • Alla obligatoriska fält är markerade med stjärna (*) och sidan är försedd med en förklaring om vad stjärna betyder
  • Fält är utformade för att passa det format de är avsedda för
  • Fält som kräver inmatning i särskilda format är försedda med hjälptexter
  • Om användaren försöker gå vidare utan att ha fyllt i eller felaktigt fyllt i obligatoriska fält markeras de aktuella fälten och ett felmeddelande visas som förklarar vad som blivit fel eller vad användaren glömt.
  • Det går att ändra information och rätta felaktigheter utan att skriva hela texten på nytt
  • Om ett fel kan rättas automatiskt får användaren ett meddelande om den planerade ändringen
  • Konsekvenser av åtgärder beskrivs före åtgärden
  • Det går att avbryta utan att spara
  • Avbrytknapp återställer till tidigare läge
  • Om ett fönster eller hela applikationen stängs kontrolleras om modifieringar är gjorda och användaren får, om det behövs, en fråga om att spara
  • Om en operation med negativa konsekvenser inte kan ångras får användaren en varning

FELMEDDELANDEN OCH VALIDERING

  • Texten talar om vad som har hänt och hur användaren kan åtgärda problemet, till exempel så visas det korrekta formatet eller det tillåtna intervallet vid inmatningsfel
  • Texten är tydlig och specifik
  • Texten är skriven i positiv form
  • Om flera fel i inmatningsfält uppstår samtidigt presenteras de samtidigt
  • Meddelanderutor är flyttbara
  • Meddelanderutor placeras i närheten av det element som har generat dem
  • Applikationens status är tydlig
  • Fråga om att spara uppstår endast om användaren inte redan har sparat
  • Systemmeddelanden är presenterade så att de är begripliga för användaren

KNAPPAR

  • Knappar byter inte plötsligt funktion eller utseende
  • Knappar har vedertagna och beskrivande namn när sådana finns
  • Knappar som inte har text har en förklaring som visas när användaren håller musen över
  • Bilder med knappfunktion är utformade så att det syns att de är knappar
  • Knappar som inte är tillgängliga för tillfället är inaktiverade

UTFORMNING AV GRÄNSSNITT FÖR OLIKA ENHETER OCH SKÄRMSTORLEKAR

  • Systemet stöder de avsedda skärmstorlekarna och skärmupplösningarna
  • Tvinga inte användaren att använda en mobilversion men erbjud gärna en sådan om grundwebbplatsens sidor är stora eller funktionerna komplexa
  • Sträva efter att göra sidhuvudet litet.
  • Minimera användningen av script på klientsidan

UTFORMNING AV GRÄNSSNITT FÖR MINDRE SKÄRMAR

  • Högerjustera inte knappar, funktioner eller grupperingar av dessa om de inte sträcker sig minst 75% av skärmen i alla lägen.
  • Lägg inte ofta använda knappar ute vid höger-/vänsterkanten om de inte upptar minst en tredjedel av skärmbredden.
  • Skapa stora klickytor
  • Radlängder ska anpassas efter skärmbredden men alltid hålla sig till max 70 tecken per rad inklusive mellanslag.
  • Använd höga kontraster.
  • Lägg in genvägar för att låta användaren hoppa mellan delar i innehållet i långa sidor.
  • Det ska vara möjligt att använda gränssnittet i både stående och liggande visning.
  • Om gränssnittet medger styrning med gestik (touchskärm) bör detta implementeras.
  • Lägg inte funktioner som enbart går att hantera via gestik, utan komplettera alltid med en knapp/länk.
  • Gör det möjligt så långt det är möjligt att styra gränssnittet med bara ett finger.
  • Se till att det går att zooma gränssnittet om möjligt
  • Minimera textinmatning i gränssnittet
  • Ge användaren tillräckligt tid och varna innan tidsgränser uppnås.

APPLIKATIONER

  • Skapa applikationer för klart avgränsade funktioner som en användare kan behöva tillgång till ofta. (+förklaring till vad som menas med applikation)
  • Applikationen utnyttjar på ett genomtänkt sätt det stöd för navigering som terminalens gränssnitt (knappsats m m) erbjuder.
  • Signaler såsom ljud och vibration används på ett genomtänkt sätt och i tydligt syfte
  • Om du utvecklar en applikation för ett operativsystem eller en mobil enhet som kan ha styrknappar (t.ex. piltangenter och en ok-knapp) ska dessa gå att använda för att navigera i gränssnittet.
  • Om du utvecklar ett gränssnitt som kan användas av enheter där du kan koppla in ett tangentbord ska gränssnittet så långt det är möjligt gå att styra med tangentbordet.

CHECKLISTA FÖR INNEHÅLLET

Texter:

  • Bestäm målgrupp, syfte och sammanhang för texten
  • Texten består av tydliga och korta avsnitt
  • Meningarna är korta
  • Rubriker speglar textens innehåll
  • Ord upprepas inte flera gånger i ledtexter
  • Samma ord används för samma sak överallt
  • Bara ord som användaren är väl förtrogen med används
  • Meningarna är korta och det viktiga framgår tydligt tidigt i meningen

Språkanpassning:

  • Diskutera i ett tidigt stadie i projektet vilka språk innehållet ska visas på

Checklista för utformning av grafiskt gränssnitt

Typografi:

  • Typsnitten är utan serifer och bekant för användarna
  • Användarna upplever att texten har bra läsbarhet

Typsnitt och textfärger:

  • Det förekommer inte fler än fyra teckenstorlekar
  • Teckenstorleken är relativt stor
  • Texten är mörk på ljus bakgrund
  • Sidrubriker och fältrubriker är tydliga

Ikoner och symboler:

  • I första hand används standardiserade ikoner
  • Nya ikoner är utvärderade med en användargrupp
  • Ikonerna är enkla och bygger på substantiv
  • Ikonerna är utformade så att de byggs upp av få och väsentliga detaljer
  • Ikonerna är logiskt grupperade efter funktion på motsvarande sätt som för knappar
  • Ikonerna skapar omedelbar igenkänning och det är lätt att komma ihåg vad de innebär redan efter ett fåtal användningstillfällen

Utformning av utskrifter:

  • Det går att skriva ut i ett bra, läsbart format

RESURSER OCH REFERENSER

Checklista för nivå AA hos WCAG 2.0

http://www.w3.org/WAI/WCAG20/quickref/

E-delegationens webbriktlinjer för offentlig sektor

www.webbriktlinjer.se

Utformning av tillgängliga mobila gränssnitt, Funka.nu

http://www.funkanu.se/Global/Filer/design_for_alla/regler_och_riktlinjer/Riktlinjer_f%C3%B6r_tillg%C3%A4ngliga_mobilgr%C3%A4nssnitt_2012.pdf

VERKTYG

KONTAKT

Behöver du stöd och råd angående framtagning eller analys av en tillgänglig webbplats? Kontakta gärna mig kostnadsfritt för rådgivning!

Key take aways från konferens om tillgänglig webb

Vad betyder tillgänglighet? 
Det är oftast en vidare betydelse vi menar när vi pratar om digital tillgänglighet.
Det betyder att något ska vara universiellt utformat (dvs. utformning för mänskligt mångfald), användbart OCH tillgängligt.

Hur många av oss har någon form av funktionsnedsättning? 
Man pratar om ca 10-20% av den svenska befolkningen, alltså runt var 5:e användare.
Det är viktigt att komma ihåg att det som är bra för några oftast är bra för alla.
Vattenkransblandaren kom till för att göra blandning av varm och kallt vatten för personer som hade svårigheter att vrida på två kranar. Nu finns varm och kallvattenkrans blandaren i nästan varje hem och vi tänker inte på att den från början endast var för personer med fysisk funktionsnedsättning. Det som är bra för några kan vara väldigt bra för alla!

Vilka grupper pratar vi om när vi diskuterar tillgänglighet? 
Personer med:

  • Synnedsättning
  • Hörselnedsättning
  • Inlärningssvårigheter
  • Kognitiva funktionsnedsättningar
  • Begränsad rörlighet
  • Talsvårigheter
  • Ljuskänslighet
  • + kombinationer av ovanstående

Vad utmärker en tillgänglig webb?
Att alla människor ska ha möjlighet att ta del av webbplatsen.

7 tips för bättre tillgänglighet
1. Strukturerar information med rubriker (korrekt placering av H1, H2, H3 osv.)
2. Styra med tangentbordet
3. Tydliga länkar (tänk träffytor, vart länkarna går, beskriv vart de leder istället för ”Läs mer”)
4. Färger som ger bra kontraster (undvik med fördel orange.. INGA oranga knappar med vit text på). Testa bilden om den fungerar i gråskala.
5. Skapa sidor som kan ses på olika sätt – responsivt, zoomning, använd relativt stora teckensnitt
6. Kommer innehållet i rätt ordning? Gå igenom flödet. Ligger knappar, länkar etc. konsekvent i innehållet? I en köpsituation ska köpknappen alltid placeras sist, inte mitt i ett textflöde.
7. Alternativ texter – lägg dessa på bilder som förmedlar information, bilder som används för dekoration (behövs dessa bilder?), bilder som är klickbara (vart går de?).

Om kognitiva trösklar på nätet, vad ska man tänka på? 
Rent allmän kan man säga att den kognitiva belastningen ökar. Vi har mer information och fler system att ta till oss. Samhället blir mer och mer komplex.

Tänk på: 
• Ju längre tid saker tar dessto sämre kommer det att gå och man tappar användare
• Förenkla! Ingen kommer att klaga på eller kritisera att något är för lätt
• Var konsekvent, följ upp dina flöden
• Negativ feedback till användaren är bra, men ge också positiv feedback. T ex när något man klickat på hamnat i varukorgen. Dvs, ge användaren feedback även när något gått bra, inte enbart när något gått dåligt.
• Begripligt språk
• Kombinera hur vi presenterar information – text, bild, film, tal. Låt användaren avgöra hur han eller hon vill ta till sig informationen.

Det viktigaste för personer med kognitiva funktionsnedsättningar:
• Innehållet ska inte blinka eller röra sig
• En bra sökfunktion med avstavningshjälp
• Webbplatsen ska vara logiskt uppbyggd, igenkänning av vedertagna mönster från andra webbplatser
• Text ska kunna läsas upp
• Lätt att hitta kontaktuppgifter
• Ska fungera i telefonen
• Inga pop-up rutor
• Bilder ska vara relevanta och dekorativa bilder kan fungera som minnesstöd
• Enkel och ren design
• Ett tydligt språk
(Fast är inte detta punkter som egentligen gäller ALLA tänker jag 

Verktyg som togs upp under dagen: 
• https://usabilla.com/ Användartestning online
• Zooma med tangentbordet ctrl+/- eller cmd+/-
• http://www.paciellogroup.com/resources/contrastanalyser/Color Contrast Analyser
• https://addons.mozilla.org/sv-se/firefox/addon/web-developer/Add-On för att testa tillgänglighet i Firefox
• Inbyggd talsyntes i Mac, VoiceOver i iPhone