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!