1. Teknologiske
trender:
Universell utforming
Vestfold IT-arena 20.05.2014
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 1
2. 2
Agenda
• Universell utforming (UU)
• Ny lov og forskrift
• Hvorfor UU?
• Hvordan ser verden ut for…?
• DIFIs retningslinjer for UU
• Validering og brukertesting
2
3. Marius Rohde Johannessen, PhD
• Førsteamanuensis Informasjonssystemer
Høgskolen i Buskerud og Vestfold
• Svennebrev mediegrafiker (2000)
• Historie grunnfag, HiBo (2002)
• BA Internet Studies, Australia (2005)
• Msc Informasjonssystemer, UiA (2009)
• PhD Informasjonssystemer, UiA (2013)
• Forskningsfokus:
• IKT i offentlig sektor, digital kommunikasjon
4. Hva er universell utforming?
Diskriminerings- og tilgjengelighetsloven :
Med universell utforming menes utforming eller tilrettelegging
av hovedløsningen i de fysiske forholdene, inkludert
informasjons- og kommunikasjonsteknologi (IKT), slik at
virksomhetens alminnelige funksjon kan benyttes av flest mulig.
Med informasjons- og kommunikasjonsteknologi (IKT) menes
teknologi og systemer av teknologi som anvendes til å uttrykke,
skape, omdanne, utveksle, lagre, mangfoldiggjøre og publisere
informasjon, eller som på annen måte gjør informasjon
anvendbar.
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 4
5. Universell utforming
Lovpålagt fra
1. juli 2014*
Blinde er også kunder med
penger
UU helt fra innholdet
produseres
Tilgjengelighet er et felles
ansvar
*2021 for eksisterende løsninger
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 5
6. Hva vil det koste?
• «Som hovedregel kan man si at en løsning som støtter
kravene ofte er 25-40% dyrere enn en løsning som ikke
gjør det» Brains+Coffee, webkonsulenter
• «Universell utforming alene fører slett ikke til
kostnadsøkning hos Mediebrukere, ofte tvert i mot» Arild
Nybø, Mediebruket
• «Sannheten er at universell utforming er et
konkurransefortrinn og gjør Internett til et bedre
sted for alle.» Ida Aalen m.fl. (ap.no 14/4)
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 6
7. Hvorfor universell utforming?
• Norge har i dag ca
• 700.000 med nedsatt hørsel
• 1 million med nedsatt syn.
• 500.000 har lese- og skrivevansker
• Hvor mange av disse er kunder hos deg?
• Mulighet for nye tjenester og inntekter?
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 7
8. UU i den fysiske verden
• Bygg
• Litt større rom
• Tilgjengelig for rullestol
(mulighet å snu)
• Biler
• Bredere dører
• Høyere sittestilling
• Fordel for noen få, eller positivt for alle?
Ill.: Arkitekturnytt
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 8
9. Konsekvenser av å ikke bry seg
• Varslet dagbøter (på sikt)
• uthenging i mediene: Hva gjør det for omdømmet?
• Osloby.no, 13. mai 2014: Ett år etter at de nye
automatene skulle vært levert, står Ruter på bar bakke.
Blindeforbundet er skuffet over at de universelt
utformede automatene ikke kommer
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 9
10. Hvordan ser verden ut for…
DYSLEKTIKERE
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 10
11. Hvordan ser verden ut for…
Svaksynte
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 11
12. Hvordan ser verden ut for…
KOGNITIVE
LIDELSER
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 12
14. Hvordan ser verden ut for…
Fargeblinde
fargesjekken
Rød/grønn-fargeblind
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 14
15. Hvordan høres verden ut for døve?
• Skru av lyden på TV når det ikke er undertekst…
• Hvor mye får vi med oss?
• En stor utfordring etter hvert som vi konsumerer mer
og mer multimedieinnhold
• Løsning: Tilby tekstalternativer for video og lydinnhold
• Undertekster
• Transkripsjoner
• Forklarende tekster
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 15
16. Retningslinjer for UU i Norge
DIFI har utarbeidet en veiviser for universell utforming
Bygger på forskrift om universell utforming:
Nettløsninger skal minst utformes i samsvar med
standard Web Content Accessibility Guidelines 2.0
(WCAG 2.0…på nivå A og AA med unntak for
suksesskriteriene 1.2.3, 1.2.4 og 1.2.5
Forskriften sier at vi må dekke 35 av 61 retningslinjer i
WCAG som et minumum
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 16
17. WCAG prinsipper
• Mulig å oppfatte
• Informasjon og UI må presenteres slik at den ikke
krever en enkelt sans
• Mulig å betjene
• brukere skal kunne navigere, velge knapper, sette
haker i avkryssingsfelt og så videre med det utstyret
de benytter. Tastaturvennlige løsninger
• Forståelig
• Språkbruk, hjelpesider, forutsigbart design
• Robust
• Sidene validerer, følge webstandarder
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 17
20. Sjekkliste for selvtesting
• Validatorer/verktøy
• HTML
• CSS
• WCAG
• Kontrast
• Skjermleser
• Skjermleser u/skjerm
• Manuelle tester
• Språkvask
• Tekststørrelse
• Str. På elementer
• Tastaturvalg
Kilde: Tollefsen: web og universell utforming
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 20
21. Brukertesting
«Det finnes ikke standarder eller objektive svar som løser
alle spørsmål knyttet til UU… en side med 50o lenker er
tilgjengelig dersom alle kan velges med tastatur. Det er
imidlertid lite brukervennlig å måtte trykke på tab-tasten
300 ganger for å komme til den lenken som skal velges»
Morten Tollefsen, forfatter av «web og universell utforming»
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 21
22. Brukertesting - hvem
• UU-tester er ikke veldig forskjellig fra vanlige brukertester, men
krever litt annen tilrettelegging og selvfølgelig tilgang til personer med
funksjonsnedsettelser:
• Synsrelaterte: Blinde, ulike øyesykdommer, svaksynte, fargeblinde
• Hørselsrelaterte: Døve, tunghørte
• Motoriske lidelser: Kan gjøre det vanskelig å bruke vanlige
nettsider. MS, muskelsykdommer osv.
• Kognitive og nevrologiske lidelser: Dysleksi, dyskalkuli, ADHD,
hukommelsessvikt, slagrammede, demente…
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 22
23. Brukertesting - hvordan
KOMET-metoden (Tollefsen)
• Definere testgruppe (funksjonshemming, alder, kompetanse)
• Rekruttering – Bygg opp et kontaktnett, eller lei inn noen
• Lag et sett med konkrete oppgaver testeren skal utføre
• Send oppgavene til testerne
• Testerne løser oppgaver og skriver ned erfaringer og hva de gjør
• Skriftlige rapporter samles inn og sammenfattes
03.10.2014 HØGSKOLEN I BUSKERUD OG VESTFOLD – PROFESJONSHØGSKOLEN 23
Eller som vi akademikere ofte sier: «It depends»… På en rekke faktorer. Hva slags innhold du har er vesentlig. Men uansett kostnad får du også langt flere lesere av nettstedet
Bygg: Positivt med litt mer plass. Unger kan leke, folk kan bevege seg, slipper å snuble over sofaen
Bil: Ikke bare rullestolbrukere som liker å kunne sette seg inn i bilen i stedet for å kle den på seg…
Bilde 1: Luft mellom elementer. Rent design. God kontrast. Viktig for svaksynte. Og så klart at brukeren kan endre størrelse på skrift.
Bilde 2: Tunnelsyn enda større utfordring. Noen har enda mindre synsfelt enn dette. Samle elementer som hører sammen. Korte tekstlinjer. Mest mulig ryddig layout.
(slagrammede, ADHD, demente
Problemer med oppmerksomhet og konsentrasjon
Sviktende hukommelse
Tilrettelegging handler i stor grad om å bruke kjente symboler og (på web) å følge konvensjoner. Søk oppe til høyre, logo øverst til venstre, meny som er enkel å bruke og har fornuftige ordvalg
Bilde 1: Dette er kjent. Vi skjønner med en gang hva som er mann og dame fordi denne figuren er standard
Bilde 2: En variant. Må tenke litt (eller kanskje jeg bare er en sær akademiker med kognisjonsproblemer?)
Bilde 3: Her er det rom for tolkning… Ser stadig flere slike
Poeng: Selv med alle sanser og funksjoner intakt så er vi avhengige av standardiserte symboler, ord og uttrykk. For personer med kognitive lidelser ville selv bilde 2 by på store utfordringer
Bilde 1: R/G er vanlig. Man mangler enten rød eller grønne pigmenter. Vær forsiktig med å bruke disse fargene sammen.
Bilde 2: Unngå å kun bruke farge for å formidle informasjon. Typisk eksempel: Diagrammer som bruker blå-grønn skala for å vise forskjeller. Avisene synder særlig mot dette. Jeg klarer aldri å se om SP eller MDG ligger rundt 5%
Bilde 3: gråtonetesten. Viktigste virkemiddel for svaksynte = HØY KONTRAST mellom farger (tekst/bakgrunn).
WCAG 2.0 er bygd opp av fire prinsipper, 12 retningslinjer og 61 sukesskriterier.
Godt sted å starte
Innhold (HTML) og presentasjon (CSS) for seg
HTML-kode som følger HTML5-std med semantiske tagger gjør siden mer tilgjengelig for skjermlesere og andre hjelpemidler
CSS med flytende layout gjør at brukeren kan tilpasse tekststørrelse, forstørre siden mm.
Responsivt design (mobil og nettbrett) og UU har altså mye felles
Det finnes mange gode verktøy hvor man relativt enkelt kan sjekke websidene sine for feil og problemer. Morten Tollefsen, forfatter av «web og universell utforming», har laget denne sjekklisten for selvtesting
Manuelle tester:
Språkvask: Enkelt å forstå. Tilreggelagt for syntetisk opplesning
Tekststørrelse: Skal kunne øke str. I nettleser uten at siden ødelegges
Elementer: Knapper, bilder og andre klikkbare elementer må være synlige og store nok
Tastaturvalg: Se hva som har fokus, alle elementer skal kunne nås ved tastaturet, tastetrykk for å gå ut av elementer (flash)
Selv om man oppfyller kriteriene på papiret bør man etterstrebe å oppfylle dem IRL. Derfor er testing med faktiske brukere viktig.
Teksten «bilde» i alt-tagger oppfyller kriteriet om å tilby tekstforklaring til bilder, men er ikke særlig brukervennlig…
Hvorfor ikke fysisk? Diskusjon, men iflg Tollefsen fordi mange funksjonshemmede synes det er vanskelig å «bli testet» av fremmede.
Viktig (som i vanlig brukertesting) å få fram at det er systemet som testes, ikke brukerens kompetanse